JQuery封装百叶窗_jquery-shutter-CSDN博客

本文链接：https://blog.csdn.net/coderping/article/details/79690239

百叶窗的设计，随着轮播图的样式增多，百叶窗的应用也非常多，下面给大家讲解如何封装百叶窗。

观察引入图片，每张图片都在盒子中靠左成等差数列，相当于每个图片平分了这个盒子（通过每个图片在盒子的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)
        })
    })