gpt4 book ai didi

jquery - 如何在鼠标悬停时在两个图像之间滑动?

转载 作者:行者123 更新时间:2023-12-01 03:11:10 26 4
gpt4 key购买 nike

如何创建一个并排包含 2 个图像的部分,当将鼠标悬停在其中一个图像上时,该部分会将其中一个图像扩展至全宽。即,当我将鼠标悬停在左侧图像上时,图像将向右扩展以显示完整图像并覆盖右侧的图像。然后,当我将鼠标悬停在右侧图像上时,该图像将向左侧扩展并覆盖左侧图像。

示例:

http://www.adhamdannaway.com/

http://www.car-vanstore.cz/

对此的任何帮助将不胜感激,我一直在网上寻找合适的 jQuery 插件和 CSS tuts,但到目前为止还没有成功。

提前致谢!

最佳答案

诀窍是了解如何使两个图像过于重叠。我附上了解决方案的工作副本。

我使用的方法依赖于绝对定位。这允许元素相互重叠。完成此操作后,我只需重新调整容器的大小并将溢出设置为隐藏即可。

var mouseX;

$("#live-zone").mousemove( function(e) {
mouseX = e.pageX;
mouseX = mouseX+"px";
$("#x-pos").html("").append(mouseX);
$("#div-one").css("width",mouseX);
});
img{
height:525px;/*Only here to ensure that my images are the same height*/
}
#img-one{
z-index:9999;
}
#div-one{
width:200px;
height: 525px;
overflow:hidden;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<body>
<div id="live-zone">
<div id="div-one">
<img id="img-one" src="http://www.asia.ru/images/img/205795/YM-009.jpg">
</div>
<div id="div-two">
<img id="img-two" src="http://www.canadabillard.com/images/thumbs/0000781_600.jpg">
</div>
</div>
<div id="x-pos">
200px
</div>

</body>

关于jquery - 如何在鼠标悬停时在两个图像之间滑动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29857999/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com