javascript - 使用动画 Jquery 在悬停时跟随鼠标

Question

我正在努力实现this 图像上的鼠标移动效果。
图像看起来像是在跟随我的鼠标，我正在尝试跟随它，到目前为止 this .我试过这个例子 https://jsfiddle.net/lesson8/SYwba/ .但我坚持将它与我当前的 fiddle 相结合。

这是我想要的输出。就像图像跟随鼠标一样。 Output

$('.animated').hover(
    function() {
        $('.animated').animate({
            marginTop:20
        });
    },
    function() {
        $('.animated').animate({
            marginTop:10
        });
    }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img class="animated" src="http://via.placeholder.com/350x150"/>

也试过这个:

$(document).mousemove(function(e) {
    $('.logo').offset({
        left: e.pageX,
        top: e.pageY + 20
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img class="logo" src="//ssl.gstatic.com/images/logos/google_logo_41.png" alt="Google">

Answer 1

逻辑其实很简单:您要做的是根据光标在文档/视口(viewport)中的相对位置，使图像偏离其原始位置。我们需要在 mousemove 中执行所有这些计算。文档上的事件。

$(document).on('mousemove', function(e) {...});

此外，这意味着您将需要以下一些信息:

1. 确定您希望图像从其原始位置移动的最大偏移量
2. 视口(viewport)宽度和高度
3. 鼠标/光标相对于视口(viewport)高度的相对位置——这将为我们提供 [0, 1] 的范围
4. 将该范围转换为 [-1, 1]，因为负值用于移动到顶部/左侧，正值用于移动到底部/右侧
5. 使用 CSS3 变换移动图像

---

分步指南

1。确定最大偏移量

假设我们想将移动限制在 ±30 像素以内。我们可以将它们定义为:

// Maximum offset for image
var maxDeltaX = 30,
    maxDeltaY = 30;

2。获取视口(viewport)尺寸

可以通过 document.documentElement.clientWidth/clientHeight 访问视口(viewport)尺寸:

// Get viewport dimensions
var viewportWidth = document.documentElement.clientWidth,
    viewportHeight = document.documentElement.clientHeight;

3和4.获取光标相对于视口(viewport)的相对位置

这里的关键是计算光标到视口(viewport)的相对位置。首先，我们获取鼠标/光标坐标到视口(viewport)的分数，这将为我们提供 [0, 1] 的范围。但是，我们需要将其转换为 [-1, 1]，以便我们可以计算左/上移动(使用负值)和下/右移动(使用正值)。从 [0, 1] 到 [-1, 1] 的算术变换只是乘以 2(所以你得到 [0, 2])和减 1(然后你得到 [-1, 1]):

// Get relative mouse positions to viewport
var mouseX = e.pageX / viewportWidth * 2 - 1,
    mouseY = e.pageY / viewportHeight * 2 - 1;

5。使用 CSS3 transform定位您的图片

这是最直接的部分。翻译的数量很简单mouseX × maxDeltaX并且沿 y 轴相同。我们将这些值传递给 transform: translate(<x>px, <y>px) :

// Calculate how much to transform the image
var translateX = mouseX * maxDeltaX,
    translateY = mouseY * maxDeltaY;
$('.animated').css('transform', 'translate('+translateX+'px, '+translateY+'px)');

---

工作示例

请参阅下面的概念验证:

// Settings
// Maximum offset for image
var maxDeltaX = 30,
    maxDeltaY = 30;

// Bind mousemove event to document
$(document).on('mousemove', function(e) {

  // Get viewport dimensions
  var viewportWidth = document.documentElement.clientWidth,
      viewportHeight = document.documentElement.clientHeight;

  // Get relative mouse positions to viewport
  // Original range: [0, 1]
  // Should be in the range of -1 to 1, since we want to move left/right
  // Transform by multipling by 2 and minus 1
  // Output range: [-1, 1]
  var mouseX = e.pageX / viewportWidth * 2 - 1,
      mouseY = e.pageY / viewportHeight * 2 - 1;
      
  // Calculate how much to transform the image
  var translateX = mouseX * maxDeltaX,
      translateY = mouseY * maxDeltaY;
  $('.animated').css('transform', 'translate('+translateX+'px, '+translateY+'px)');
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img class="animated" src="http://via.placeholder.com/350x150"/>