其实逻辑很简单:你要做的就是根据光标的相对位置，将图像从原来的位置偏移在文档/视口中.我们需要在文档的 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"/>