Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
}
ul,li {
	list-style:none;
}
.block {
	width:200px;
	height:195px;
	background:#ffad33;
	margin:0 0 0 0;
}
.progress {
	width:200px;
	height:10px;
	background:rgba(0,0,0,.3);
	position:relative;
	padding:3px 0  0 0;
}
.progress .bar {
	width:1px;
	height:4px;
	background:rgba(255,255,255,0.5);
}
.img {
	width:100%;
	height:auto;
	position:relative;
}
.img img {
	width:100%;
	height:auto;
	position:absolute;
}
.zz {
	z-index:99;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

鼠标悬停移动图片切换

代码说明

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

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

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

0