jQuery多個視差按鈕

Question

我在單個頁面上有一堆div，它們都具有相同的類型以用作按鈕。 它們當前都具有相同的類box ，每個類都有自己的獨特內容。

我試圖讓它們稍微遠離鼠標以產生輕微的視差效果。 但是我很難讓它們彼此獨立地移動。

目前，這是我嘗試過的：

$(function() {
    $('.box').each(function() {
        var location = $(this).offset();
        var locationX = location.left;
        var locationY = location.top;

        $('html').on("mousemove", function(event) {
            var offsetX = (locationX - event.pageX) / 100;
            var offsetY = (locationY - event.pageY) / 100;

            $('.box').css('transform', 'translate3d(' + offsetX + 'px, ' + offsetY + 'px, 0)');
        });
    });
});

因此，基本上，我抓住了每個框元素的位置，該位置是X和Y位置。 然后，該事件應該獲取光標的位置，然后根據框的初始位置進行一些數學運算以生成視差效果。

現在，我知道為什么這行不通了，因為在CSS的代碼行中，我使用的是.box ，它適用於頁面上每個框元素到最后聲明的框的位置。 我的初衷是為了用this代替它，但后來它指的是html這是在開始時使用mousemove功能，但我真的想訪問的實例box它上面。

我需要怎么做才能使箱子彼此獨立地移動？

（這是到目前為止我所了解的東西）

Answer 1

該腳本可獨立移動框，但獨立移動量很小（請參見下文）。

jQuery的

  $('html').on("mousemove", function(event) {
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    $('.box').each(function( i ) {
      var location = $(this).offset();
      var locationX = location.left;
      var locationY = location.top;
      var offsetY = ( locationY - mouseY ) / 40;
      var offsetX = ( locationX - mouseX ) / 30;
      //console.log( i + ' locationX: ' + locationX );
      $( this ).css('transform', 'translate3d(' + offsetX + 'px, ' + offsetY + 'px, 0)');

  });
});

從devtools渲染的html：

<body translate="no">

    <div class="box" style="top: 50px; left: 50px; transform: translate3d(-27.3027px, -0.854667px, 0px);">
      Box 1
    </div>

    <div class="box" style="top: 50px; left: 250px; transform: translate3d(-23.2213px, -0.854667px, 0px);">
  Box 2
</div>

<div class="box" style="top: 50px; left: 450px; transform: translate3d(-19.1397px, -0.854667px, 0px);">
  Box 3
</div>
</body>

那么也許重新計算視差數學？ 也就是說，由於框垂直對齊，因此它們始終具有相同的offsetY，因此在該維度上永遠不會相對於彼此移動。 它們的locationX相差200像素，如果將其除以50，它們只能相對彼此移動4像素。 我認為您的偏移量計算需要更多的復雜性。

Codepen： http ：//codepen.io/SteveClason/pen/JKjWVB？editors = 1111

jQuery多個視差按鈕

問題描述

1 個解決方案

解決方案1
0 已采納 2016-05-28 19:26:10

jQuery多個視差按鈕

問題描述

1 個解決方案

解決方案1 0 已采納 2016-05-28 19:26:10

解決方案1
0 已采納 2016-05-28 19:26:10