JQuery封装百叶窗
程序员文章站
2022-06-01 16:57:43
...
百叶窗的设计，随着轮播图的样式增多，百叶窗的应用也非常多，下面给大家讲解如何封装百叶窗。
观察引入图片，每张图片都在盒子中靠左成等差数列，相当于每个图片平分了这个盒子（通过每个图片在盒子的left值设置），一旦鼠标进入，整张图片展开，剩下的图片平分剩余宽度
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="shutter">//设置类名为shutter在js文件方便定义样式
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
</ul>
</div>
<script src="js/jquery-1.11.3.min.js"></script>//这是JQuery的引用
<script src="js/Myshutter.js"></script>//这是自己封装的js文件
<script>
Myshuutter({width:750,height:500});//这是Myshutter.js下的函数这里通过Json传值，width和height对应图片的宽高
</script>
</body>
</html>这是主界面的设计，我们的样式不需要在这里定义，直接在shutter.js来设置样式
function Myshuutter(Json){
$shutter = $(".shutter");
$li = $(".shutter ul li");//获取li
$length = $(".shutter ul li").length;//获取li的个数
$objWidth = Json["width"]*4/3;//把shutter的宽度设置为图片宽度的三分之四
$objHeight = Json["height"];//shutter的高同图片高度
//样式设置
$shutter.css({
position: "relative",
margin: "100px auto",
width: $objWidth,
height: $objHeight,
boxShadow: "0 0 10px 0 #ff6600",
overflow: "hidden"
})//shutter的样式，超出部分进行隐藏
$(".shutter ul").css({
listStyle: "none",
left: 0
});//ul在shutter中left=0
$(".shutter ul li").css({
top: "0",
position: "absolute",
});设置li样式，决定定位（为了方便把每个图片定位在盒子的不同位置）
$(".shutter li img").css({
width: Json["width"],
height: Json["height"]
});//图片的宽度高度通过传入的Json设置
$ImgLeft = $shutter.width()/$length;//鼠标不移入时每张图片占有宽度
$LiLeft = ($shutter.width()-$li.width())/($length-1);//鼠标移入后，出去展开图片，剩余li平均占有宽度
$li.each(function () {
$(this).css({
left: $(this).index()*$ImgLeft
});
});//设置未发生触发事件的默认样式
$li.mouseenter(function () {//鼠标移入事件
var index = $(this).index();
$li.each(function (i) {
$(this).stop(true);//清楚队列，防止动画累计
if(i<=index){//鼠标移入图片的左边
$(this).animate({
left: $(this).index()*$LiLeft//图片的left是等差数列
//移入图片的右面的left恰好是左边的图片数-1（鼠标移入图片不算）乘以剩余平均宽度加上移入图片宽度
},500)
}else{
$(this).animate({ left: $li.width() +(i-1)*$LiLeft
},500)
}
})
}) ; $li.mouseleave(function () { //鼠标移出后，设置成未发生触发事件的默认样式
$li.each(function (i) {
$(this).stop(true);
$(this).animate({left: $ImgLeft*i},500)
})
})