Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
$(".block").mousemove(function(eva) {
$with = $(".progress").width(); //
$zhen = eva.pageX; // div
$(".bar").css("width", $zhen);
$le = $(".img img").length; //
$bb = $with / $le; //
for (var i = 1; i <= $le; i++) {
if ($zhen <= ($bb * i)) {
$(".img img").removeClass("zz");
$(".img img").eq(i - 1).addClass("zz");
return;
}
}
})
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

鼠标悬停移动图片切换

代码说明

1、还是用简单的代码实现比较常见的效果,无需各类插件,也是抛砖引玉,提供给大家一些思路。

2、该代码,无需通过jq设置图片数量,会自动遍历,使用时候可以只修改css获得想要的尺寸大小,滚动条样式。

3、代码中有一条注释:需要获取鼠标在div移动的距离,这个需要额外注意,如果用在实际项目中,需要额外计算。

0