百叶窗照片(偏js版、jq精简版)-蒲公英云

问题
    如何计算每个图片分配的位置大小
    当一个图片完全展开时，如何计算其他图片分配的位置大小
    如何设置未点击时的黑幕效果和点击后的去除(即利用定位，使得黑幕div和img重叠，然后设置黑幕div的背景颜色和透明度)
    压缩图片的效果是怎么实现的(利用overflow多余效果不显示);
    如何清除动画累计    
    jq是使用.eq()来进行类似数组下标操作的
添加方法
    $('选择器').find('css选择器(类选择器要加.)');  获得选择对象的子元素
要想添加回归延迟效果
    使用mouseover事件

偏js思想版

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{ 
                margin: 0px;
                padding: 0px;
            }
            .box{ 
                width:800px;
                height: 300px;
                border: solid 1px orange;
                position: relative;
                margin: 100px auto;
                overflow: hidden;
            }
            ul{ 
                list-style-type: none;
            }
            ul li{ 
                position: absolute;
            }
            .cover{ 
                width: 100%;
                height: 300px;
                background-color: rgba(0,0,0,0.5);
                position: absolute;
            }
            .li1{ 
                left: 160px;
            }
            .li2{ 
                left:320px;
            }
            .li3{ 
                left:480px;
            }
            .li4{ 
                left:640px;
            }
        </style>
        <script src="js/jquery-3.4.1.js"></script>
    </head>
    <body>
        <div class="box">
            <ul>
                <li class="li0">
                    <div class="cover"></div>
                    <img src="img/0.jpg" alt="" />
                </li>
                <li class="li1">
                    <div class="cover"></div>
                    <img src="img/1.jpg" alt="" />
                </li>
                <li class="li2">
                    <div class="cover"></div>
                    <img src="img/2.jpg" alt="" />
                </li>
                <li class="li3">
                    <div class="cover"></div>
                    <img src="img/3.jpg" alt="" />
                </li>
                <li class="li4">
                    <div class="cover"></div>
                    <img src="img/4.jpg" alt="" />
                </li>
            </ul>    
        </div>
        <script>
            var lis=$(".box li");
            //设置黑幕淡出效果
            lis.mouseenter(function(){ 
                $(this).find('.cover').stop(true).fadeOut();
            });
            //设置黑幕淡入效果
            lis.mouseleave(function(){ 
                $(this).find('.cover').stop(true).fadeIn();
                //当鼠标离开时，动画变为初始位置
                for(var i=0;i<lis.length;i++){ 
                    lis.eq(i).animate({ 'left':160*i},500);
                }
            });
            $(".li0").mouseenter(function(){ 
                //去除动画累计
                lis.stop(true);
                //计算当第一个图片完全展开时，其他图片分配的位置大小
                for(var i=1;i<lis.length;i++){ 
                    lis.eq(i).animate({ 'left':560+(i-1)*60},500);
                }
        });
            $(".li1").mouseenter(function(){ 
                //去除动画累计
                lis.stop(true);
                //计算当第二个图片完全展开时，其他图片分配的位置大小
                lis.eq(1).animate({ 'left':60},500);
                for(var i=2;i<lis.length;i++)
                { 
                    lis.eq(i).animate({ 'left':620+(i-2)*60},500);
                }
        });
            $(".li2").mouseenter(function(){ 
                //去除动画累计
                lis.stop(true);
                //计算当第三个图片完全展开时，其他图片分配的位置大小
                    lis.eq(1).animate({ 'left':60},500);
                    lis.eq(2).animate({ 'left':120},500);
                for(var i=3;i<lis.length;i++)
                { 
                    lis.eq(i).animate({ 'left':680+(i-3)*60},500);
                }
        });
            $(".li3").mouseenter(function(){ 
                //去除动画累计
                lis.stop(true);
                //计算当第四个图片完全展开时，其他图片分配的位置大小
                lis.eq(4).animate({ 'left':740})
                for(var i=0;i<4;i++)
                { 
                    lis.eq(i).animate({ 'left':60*i},500);
                }
        })
            $(".li4").mouseenter(function(){ 
                //去除动画累计
                lis.stop(true);
                //计算当第五个图片完全展开时，其他图片分配的位置大小
                lis.eq(4).animate({ 'left':240},500);
                for(var i=0;i<4;i++)
                { 
                    lis.eq(i).animate({ 'left':60*i},500);
                }
            })
        </script>
    </body>
</html>

jQ精简版

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{ 
                margin: 0px;
                padding: 0px;
            }
            .box{ 
                width:800px;
                height: 300px;
                border: solid 1px orange;
                position: relative;
                margin: 100px auto;
                overflow: hidden;
            }
            ul{ 
                list-style-type: none;
            }
            ul li{ 
                position: absolute;
            }
            .cover{ 
                width: 100%;
                height: 300px;
                background-color: rgba(0,0,0,0.5);
                position: absolute;
            }
            .li1{ 
                left: 160px;
            }
            .li2{ 
                left:320px;
            }
            .li3{ 
                left:480px;
            }
            .li4{ 
                left:640px;
            }
        </style>
        <script src="js/jquery-3.4.1.js"></script>
    </head>
    <body>
        <div class="box">
            <ul>
                <li class="li0">
                    <div class="cover"></div>
                    <img src="img/0.jpg" alt="" />
                </li>
                <li class="li1">
                    <div class="cover"></div>
                    <img src="img/1.jpg" alt="" />
                </li>
                <li class="li2">
                    <div class="cover"></div>
                    <img src="img/2.jpg" alt="" />
                </li>
                <li class="li3">
                    <div class="cover"></div>
                    <img src="img/3.jpg" alt="" />
                </li>
                <li class="li4">
                    <div class="cover"></div>
                    <img src="img/4.jpg" alt="" />
                </li>
            </ul>    
        </div>
        <script>
            var lis=$(".box li");            
            var index=null;
            lis.mouseenter(function(){ 
                //获取当前点击图片的下标
                lis.stop(true);
                index=$(this).index();
                lis.eq(index).children('.cover').stop(true).fadeOut();
                lis.each(function(i){ 
                    //判断图片左右
                    if(i<=index){ 
                        lis.eq(i).animate({ 'left':60*i},500);
                    }else{ 
                        lis.eq(i).animate({ 'left':560+60*(i-1)},500);
                    }
                })
            }).mouseleave(function(){ 
                lis.stop(true);
                lis.each(function(i){ 
                    lis.eq(i).animate({ 'left':160*i},500);
                })
                lis.eq(index).find('.cover').stop(true).fadeIn();
            })
        </script>
    </body>
</html>