jquery - 使用带有渐变的 translateX 在鼠标移动上显示图像

Question

$(document).ready(function() {
  var $window = $(window),
    $overlay = $('.example2'),
    rotation = 0,
    transOver = 0

  $window.on('mousemove', function(event) {
    transOver = (event.pageX / $window.width() * 1720) - 690;
    $overlay.css('transform', 'translateX(' + transOver + 'px)');
  });
});

.img-responsive {
  display: block;
  width: 100%;
  height: auto;
}
.stopOverflow {
  overflow-x: hidden;
  overflow-y: hidden;
}
#container {
  position: relative;
  width: 500px;
  height: 500px;
}
img {
  top: 0;
  left: 0;
}
.example3 {
  position: relative;
  z-index: -3;
}
.example2 {
  position: absolute;
  z-index: -2;
  bottom: 0;
  top: 0;
}
.example1 {
  position: absolute;
  z-index: -1;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" class="stopOverflow">
  <img class="example1 img-responsive" src="http://i.imgur.com/iHBQH7o.png">
  <img class="example2 img-responsive" src="http://i.imgur.com/0sBuSLm.png">
  <img class="example3 img-responsive" src="http://i.imgur.com/9T7zUhd.png">
</div>

所以我有 3 个图像(如果有更好的方法来处理这个问题，我洗耳恭听)。我需要的效果是让淋浴看起来像是在打开。我目前使用的是 3 层。顶层只是淋浴喷头。中间层是带有渐变的图像，底部是水。这些图像的大小均相同，并且设置为响应式。

问题是带有渐变的图像在不同分辨率下向左或向右移动太少或太多。我确信这是因为我正在使用的值(value)观。我只需要它在多个尺寸的显示器上保持一致。移动显然不是问题。 fiddle 发布在下面

https://jsfiddle.net/5v0b7tL8/2/

Answer 1

所以我通过查看这个代码笔找到了答案

http://blog.mediamonkfish.com/animating-css3-gradients-on-mouse-move/

我仍然使用图像，但将脚本更改为这个

$window.on('mousemove', function(event) {
    transOver = (event.pageX / $window.width() * 100);
    $overlay.css('transform', 'translateX(' + transOver + '%)');
  });

将其设置为使用屏幕的百分比，使其保持一致。至少我认为这就是它与使用设定像素量相比所做的。