JS橱窗特效

效果图

HTML

1、搭建外层div，设置定位
2、添加图片li便签
3、增加底部灰色div
4、灰色div上有进度条

<div id="box">
    <ul id="boxtop">
        <li><img src="图片/1.jpg"></li>
        <li><img src="图片/2.jpg"></li>
        <li><img src="图片/3.jpg"></li>
        <li><img src="图片/4.jpg"></li>
        <li><img src="图片/5.jpg"></li>
        <li><img src="图片/6.jpg"></li>
        <li><img src="图片/7.jpg"></li>
        <li><img src="图片/8.jpg"></li>
        <li><img src="图片/9.jpg"></li>
        <li><img src="图片/10.jpg"></li>
    </ul>
    <div id="boxbottom">
        <span class="span"></span>
    </div>
</div>

css

1、li标签，横着摆放。设置左浮动（float：left）
2、橙色进度条在灰色底上，设置定位（position）。边框样式，设置border-radius。鼠标停留时cursor为pointer
3、设置ul宽度。将超出外层的部分隐藏（hidden）
4、图片有间隔，设置每个li的宽度（width）
5、列表距顶部有距离，设置top值
6、不首先设置橙色进度条的宽度，因为宽度和 图片数量有关，在JS中实现。

*{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        li img{
            width: 130px;
            height: 130px;
        }
        #box{
            width:800px;
            height: 200px;
            border: 1px solid gray;
            margin: 100px auto;
            position: relative;
           overflow: hidden;
        }
        #box ul{
            width: 1350px;
            position: absolute;
            left: 0;
            top: 20px;
        }
        #box ul li{
            float: left;
            width: 135px;
        }
        #boxbottom{
            position: absolute;/*整个底部，定位在盒子的底部*/
            left: 0;
            bottom: 0;
            background-color: lightgray;
            width:100%;
            height: 25px;
        }
        .span{
            height: 25px;
            position: absolute;/*橘色进度条定位在底部灰色块之上*/
            left: 0;
            top: 0;
            background-color: orangered;
            border-radius: 10px;
            cursor: pointer;
        }

JS

事件分析

鼠标点击进度条（onmousedown）并且移动（onmousemove）
鼠标抬起（onmouseup）进度条不移动（οnmοuseup=null）

特效分析

1、进度条左移，ul左移值变小。进度条右移时，ul往左走，越来越大（left）
2、当进度条一直往某一边移动时，进度条不会超出灰色底部区域
3、滚动条的长度，不是随便设置。而是根据图片的数量决定

核心技术点

• 滚动条的长度=（盒子的宽度/内容宽度）*盒子宽度

• 内容走的距离=（内容长度-盒子长度）/（盒子长度-滚动条长度）*滚动条走的距离

 //1、获取标签
        var box=document.getElementById("box");
        var boxT=document.getElementById("boxtop");
        var boxB=document.getElementById("boxbottom");
        var mask=boxB.children[0];
        //2、设置滚动条的长度
        //滚动条的长度=（盒子的宽度/内容宽度）*盒子宽度
        var len =(box.offsetWidth/boxT.offsetWidth)*box.offsetWidth;
        mask.style.width=len+"px";
        //3、监听鼠标的按下
        mask.onmousedown = function (event) {
            var e=event||window.event;
            //求出鼠标点击的初始值
            var beginX=event.clientX-mask.offsetLeft;
            //鼠标点击处-当前进度条距离灰色底左边的定位距离
            //移
            document.onmousemove=function (event) {
                var e=event||window.event;
                //求出移动的距离
                var endX=event.clientX-beginX;
                //作用到mask
               /* mask.style.left=endX+"px"; *///单纯就这样写会让进度条滑到看不见的位置
                //处理边界值
                if(endX<0)
                {
                    endX=0;
                }else if(endX>=box.offsetWidth-mask.offsetWidth){
                    endX=box.offsetWidth-mask.offsetWidth;
                }
                mask.style.left=endX+"px";
                //内容走的距离=（内容长度-盒子长度）/（盒子长度-滚动条长度）*滚动条走的距离
                var content=(boxT.offsetWidth-box.offsetWidth)/(box.offsetWidth-mask.offsetWidth)*endX;
                boxT.style.left=-content+"px";
                return false;
            }
            document.onmouseup = function () {
                document.onmousemove=null;
            }
        }

自己的疑问

这里不是求鼠标点击的起始值吗
为什么不知直接用beginX=event.clientX

解：在这里是可以直接使用起始值为当前鼠标点击的位置。
但是在其他一些情况下，offsetLeft可能不一定为0.所以我们为了保险起见，最好是减去。

 mask.onmousedown = function (event) {
            var e=event||window.event;
            //求出鼠标点击的初始值
            var beginX=event.clientX-mask.offsetLeft;
            //鼠标点击处-当前进度条距离灰色底左边的定位距离
            //移
       }

总结步骤

1、搭建基本页面
2、设置css基本样式
3、动态设置滚动条长度
4、获取鼠标初始的点击位置
5、在鼠标移动时，获取移动时的位置
6、获取移动后的位置后，根据公式换算，设置ul左移的长度。
7、在鼠标移动事件结尾加上retrun false。防止出现，进度条不能左走的情况。退出此函数
7、在鼠标抬起时，清空进度条的移动事件