如何讓元素漂浮在身體內部而不是元素

我有一個圖像，使用javascript在div內部浮動。該div位於長卷軸上的頁面的第一部分。所以圖像在第一個div中反彈，但是當我向下滾動時，它停留在該div中。我希望圖像在用戶向下滾動時在頁面（在主體中）向下移動，圖像從瀏覽器窗口彈出並使用瀏覽器窗口作爲引用，而不是如代碼中所示的容器div。如何讓元素漂浮在身體內部而不是元素

我試圖把div放在body中，但我認爲它與javascript有關。

圖像本質上被困在container-fluid的內部。將它從該容器中取出並將腳本的x和y更改爲$(window).width()和$（window）.width（）並沒有成功。

<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 
    }); 
});

來源

2016-09-19 user2684452

你可以嘗試改變：$ parent = $ this.parent（），to $ parent = $（document）？ – klikas

@klikas它使它隱藏在頁面中間的隨機元素下面。 – user2684452

如果它按照你的意願彈跳，不受父母限制，但偶爾隱藏時間，這是一個單獨的Z指數問題。 – klikas

您需要設置CSS這樣：

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

來源

2016-09-19 23:18:43 oMogGwartz

您正在建議更換$ this.css（{}）部分？ – user2684452

我只是把postion:fixed在IMG的div和它的伎倆。

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

}

來源

2016-09-20 17:24:50 user2684452

如何讓元素漂浮在身體內部而不是元素

回答

相關問題