Question

我是Jquery的新手，正在研究在鼠标悬停时更改图片的一些很好的效果。我是全新的，所以我不想要求一个完整的解决方案代码（如果有人想帮助解决这个问题，我不介意，因为我正在学习）

我的目标：https://ibb.co/gMwM5k

描述：例如，我有两张图片--A和B.我希望能够显示图片A和鼠标悬停（仅基于y坐标 - 左/右移动）将其更改为图片B，但如图所示（这样A图像仍然存在，但只是一部分）。

也许有人可以给我一些关于我需要的有用文章，以实现这一目标。在构造这个问题的正确方法上，小的伪代码也很棒！

另外，这对新手来说是一项艰苦的工作吗？

Answer 1

此页面可能对您有用：

http://www.tutorialrepublic.com/faq/how-to-create-jquery-slide-left-and-right-toggle-effect.php

你可以使用这里显示的幻灯片示例和目标和img超越另一个img

您可以使用css将图像放在彼此的顶部。结帐＆＃34;职位：绝对;＆＃34;风格。

Answer 2

试试这个，

var mouseX = 0,
  second = $(".second"),
  xp = 0,
  offset = 10,
  clrTimeout = null,
  limitX = $('.container').width() - offset;
$('.container').mousemove(function(e) {
  clearTimeout(clrTimeout);
  mouseX = Math.min(e.pageX - $(this).offset().left, limitX);
  if (mouseX < offset) mouseX = offset;
  xp += (mouseX - xp);
  second.css({
    left: xp
  });
});

img,
.container{
  width: 200px;
  height: 200px
}

.first,
.second {
  position: absolute
}

.second {
  left: 40%
}

.container {
  position: relative;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="first"><img src="https://placeholdit.imgix.net/~text?txtsize=19&bg=ff44ff&w=200&h=200" alt="Image1" /></div>
  <div class="second"><img src="https://placeholdit.imgix.net/~text?txtsize=19&bg=33ff44&w=200&h=200" alt="Image1" /></div>
</div>

Jquery - 在鼠标悬停时更改图像

2 个答案: