使用动画 Jquery 在悬停时跟随鼠标 [英] Follow mouse on hover using animate Jquery

问题描述

我正在尝试在图像上实现这个鼠标移动效果.
图像似乎跟随我的鼠标，我正在尝试跟随它，到目前为止this.我试过这个例子 https://jsfiddle.net/lesson8/SYwba/.但我坚持将它与我目前的小提琴结合起来.

I'm trying to achieve this mousemove effect over the images.
The images seem like it's following my mouse,I'm trying to follow it and so far this. I tried this example https://jsfiddle.net/lesson8/SYwba/. But I'm stuck on combining it with my current fiddle.

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

This is my desired output.Like the images is following the mouse. 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">

推荐答案

其实逻辑很简单:你要做的就是根据光标的相对位置，将图像从原来的位置偏移在文档/视口中.我们需要在文档的 mousemove 事件中执行所有这些计算.

The logic is actually quite simple: what you want to do is to offset the image away from its original position based on the relative position of the cursor in the document/viewport. We will need to perform all this calculations in the mousemove event on document.

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

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

Also, this means that you will need some following information:

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

1. determine the maximum offset you want the image to be moved from its original position
2. the viewport width and height
3. the mouse/cursor position relative to viewport height—that will give us a range of [0, 1]
4. transform that range to [-1, 1], since negative values are used to move to the top/left and positive values used to move to the bottom/right
5. use CSS3 transform to move the image

<小时>

分步指南

1.确定最大偏移量

假设我们想将移动限制在±30px.我们可以将它们定义为:

---

Step-by-step guide

1. Determine maximum offset

Let's say we want to restrict the movement to ±30px. We can define them as:

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

2.获取视口尺寸

可以通过document.documentElement.clientWidth/访问视口尺寸客户端高度:

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

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

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

3 and 4. Get the relative position of the cursor to the viewport

The key here is to calculate the relative position of the cursor to the viewport. First, we get the fraction of the mouse/cursor coordinates to the viewport, which will give us a range of [0, 1]. However, we need to transform this into [-1, 1], so that we can calculate left/top movement (using negative values) and bottom/right movement (using positive values). The arithmetic transformation from [0, 1] to [-1, 1] is simply multiplying to 2 (so you get [0, 2]) and minus 1 (then you get [-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):

5. Use CSS3 transform to position your image

This is the most straight forward part. The amount to translate is simply mouseX × maxDeltaX and the same along the y-axis. We pass these values into 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)');

<小时>

工作示例

请参阅下面的概念验证:

---

Working example

See proof-of-concept below:

// 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"/>

这篇关于使用动画 Jquery 在悬停时跟随鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！