js进阶之橱窗展示

思路

1. 获取需要的标签

2. 求出滚动条的长度（公式：滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度）

3. 监听鼠标按下事件：3 设置起始位置

4. 监听鼠标的移动：4.1求出移动的位置
   4.2判断滚动条的位置（防超出）
   4.3 移动滚动条、商品滚动（公式：内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离）；

5. 监听鼠标的离开事件：把鼠标的移动事件设置为无即可。

    <script>
        window.onload = function (){
            //1.获取需要的标签
            var box = document.getElementById("box");
            var box_top = box.children[0];
            var box_bottom = box.children[1];
            var mask = box_bottom.children[0];
            //2.获取滚动条长度
            // 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
            var mask_length = (box.offsetWidth /box_top.offsetWidth) * box.offsetWidth;
            mask.style.width = mask_length + "px";
            //3.监听鼠标按下的事件
            mask.onmousedown = function (event){
                var event = event || window.event;
                //3.1设置起始位置
                var beginX = event.clientX - mask.offsetLeft;
                //3.2 监听鼠标的移动
                document.onmousemove =function (event){
                    var event = event || window.event;
                    //3.2.1求移动的位置
                    var endX = event.clientX - beginX;

                    //3.2.2处理边界值
                    if(endX < 0){
                        endX = 0
                    }else if(endX >= box.offsetWidth - mask.offsetWidth){
                        endX = box.offsetWidth - mask.offsetWidth;
                    }
                    //3.2.3让滚动条滚动
                    mask.style.left = endX + "px";

                    //3.2.4 让商品随着滚动
                    //公式：内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离
                    var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
                    box_top.style.left = -content_len + "px";

                    return false;
                };
                document.onmouseup = function (){
                    document.onmousemove = null;
                }
            }
        }
    </script>