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层。顶层只是淋浴头。中间层是具有渐变的图像，底部是水。图像大小相同，并设置为响应。

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

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 + '%)');
  });

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

图像使用带有渐变的translateX在mousemove上显示

1 个答案: