使用动画Jquery在鼠标悬停时跟踪鼠标

Question

我试图在图像上实现这种鼠标移动效果。
这些图像看起来像它下面我的鼠标，我试图遵循它，到目前为止这个 。 我试过这个例子https://jsfiddle.net/lesson8/SYwba/ 。 但我坚持把它与我目前的小提琴结合起来。

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

 $('.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

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

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

此外，这意味着您将需要以下信息：

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

---

分步指南

1.确定最大偏移量

假设我们想将运动限制在±30px。 我们可以将它们定义为：

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

2.获取视口尺寸

可以通过document.documentElement.clientWidth/clientHeight访问视口尺寸：

// 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]）：

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

Answer 2

尝试将悬停事件绑定到div或某个容器，在该容器中要移动图像而不是图像本身。

$('.wrapper-div').hover();

Answer 3

我只是给你一个提示

 $('.animated').mousemove( function(ev) { document.getElementById("MouseCoord").innerHTML = ev.clientX + ':' + ev.clientY; } ); window.addEventListener("load", function() { var rect = document.getElementById("container").getBoundingClientRect(); // .toFixed(0) only remove decimal part for a nice display document.getElementById("BoxSize").innerHTML = "Box is at (" + rect.left.toFixed(0) + ";" + rect.top.toFixed(0) + ")" + " with size " + rect.width.toFixed(0) + "x" + rect.height.toFixed(0); }); 

 #container { width: 400px; height: 200px; border: .1px solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <p id="MouseCoord">-</p> <p id="BoxSize">-</p> <div id="container"> <img class="animated" src="http://via.placeholder.com/350x150" /> </div>