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

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

还试过这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>