Question

我有一个使用javascript在div内部浮动的图像。 div位于长卷轴页面的第一部分。因此图像在第一个div中反弹，但是当我向下滚动时，它会保留在该div中。当用户向下滚动并且图像从浏览器窗口反弹并使用浏览器窗口作为参考时，我希望图像向下移动（在正文中），而不是容器div，如下面的代码所示。

我试图把div放在体内，但我认为它与javascript有关。

图像基本上被困在container-fluid内。从容器中取出并将脚本的x和y更改为$(window).width()和$（窗口）.width（）isn＆＃39做这个伎俩。

<div class="container-fluid">
      <div class="section-1-new">
           <li><img src="<?php echo get_template_directory_uri(); ?>/images/image.png"></a></li>
       </div>
</div> 

<script>
$.fn.bounce = function(options) {

    var settings = $.extend({
        speed: 10
    }, options);

    return $(this).each(function() {

        var $this = $(this),
            $parent = $this.parent(),
            height = $parent.height(),
            width = $parent.width(),
            top = Math.floor(Math.random() * (height / 2)) + height / 4,
            left = Math.floor(Math.random() * (width / 2)) + width / 4,
            vectorX = settings.speed * (Math.random() > 0.5 ? 1 : -1),
            vectorY = settings.speed * (Math.random() > 0.5 ? 1 : -1);

        // place initialy in a random location
        $this.css({
            'top': top,
            'left': left
        }).data('vector', {
            'x': vectorX,
            'y': vectorY
        });

        var move = function($e) {

            var offset = $e.offset(),
                width = $e.width(),
                height = $e.height(),
                vector = $e.data('vector'),
                $parent = $e.parent();

            if (offset.left <= 0 && vector.x < 0) {
                vector.x = -1 * vector.x;
            }
            if ((offset.left + width) >= $parent.width()) {
                vector.x = -1 * vector.x;
            }
            if (offset.top <= 0 && vector.y < 0) {
                vector.y = -1 * vector.y;
            }
            if ((offset.top + height) >= $parent.height()) {
                vector.y = -1 * vector.y;
            }

            $e.css({
                'top': offset.top + vector.y + 'px',
                'left': offset.left + vector.x + 'px'
            }).data('vector', {
                'x': vector.x,
                'y': vector.y
            });

            setTimeout(function() {
  move($e);
}, 0);

vectorX = settings.speed * (Math.random() > 0.5 ? 0.1 : -0.1),
vectorY = settings.speed * (Math.random() > 0.5 ? 0.1 : -0.1);

            };

        move($this);
    });

};

$(function() {
    $('.section-1-new li').bounce({
        'speed': 1.8
    });
});

Answer 1

您需要将CSS设置为：

position: absolute;
left: 50%;
top: 50%;

Answer 2

我只是将postion:fixed放在img div上，然后就可以了。

    .section-1-new li a img {
        width: 420px;
        height: auto;
        z-index: 1000001;
        position: fixed;

}

如何让元素浮动体内而不是元素

2 个答案: