JavaScript如何实现橱窗展示效果

这篇文章将为大家详细讲解有关JavaScript如何实现橱窗展示效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

1.先搭架子

* {            margin: 0;            padding: 0;        }                .box {            width: 800px;            height: 190px;            border: 1px solid #000;            margin: 100px auto;        }                ul {            list-style: none;            display: flex;        }                ul img {            vertical-align: top;        }                .progress {            width: 100%;            height: 30px;            background: #ccc;        }                .progress>.line {            width: 100px;            height: 100%;            background: orange;            border-radius: 15px; }

<div class="box">        <ul>            <li>                <img src="images/img1.jpg" >            </li>            <li>                <img src="images/img2.jpg" >            </li>            <li>                <img src="images/img3.jpg" >            </li>            <li>                <img src="images/img4.jpg" >            </li>            <li>                <img src="images/img5.jpg" >            </li>            <li>                <img src="images/img6.jpg" >            </li>            <li>                <img src="images/img7.jpg" >            </li>            <li>                <img src="images/img8.jpg" >            </li>            <li>                <img src="images/img9.jpg" >            </li>            <li>                <img src="images/img10.jpg" >            </li>        </ul>        <div class="progress">            <div class="line"></div>        </div></div>

2.逻辑部分

拿到需要操作的元素

计算ul的宽度

设置ul的宽度

计算滚动条的宽度

设置滚动条的宽度

监听鼠标按下的事件

• 拿到滚动条当前的位置

• 拿到鼠标在滚动条中按下的位置
  

监听鼠标移动事件

• 拿到鼠标在滚动条中移动之后的位置

• 计算偏移位

• 安全校验

• 重新设置滚动条的位置

• 计算图片的滚动距离

• 重新设置图片的位置

 .box {           overflow: hidden;        }                ul {            position: relative;        }                .progress {            position: relative;        }                .progress>.line {            position: absolute;            left: 0;            top: 0;  }

//1.拿到需要操作的元素const oUl = document.querySelector("ul");const oItems = oUl.querySelectorAll("li");const oProgress = document.querySelector(".progress");const oLine = document.querySelector(".line");const oBox = document.querySelector(".box"); //2.计算ul的宽度const ulWidth = oItems[0].offsetWidth * oItems.length; //3.设置ul的宽度oUl.style.width = ulWidth + 'px'; //4.计算滚动条的宽度// 滚动条的宽度/滚动条滚动范围 = 容器的宽度/内容的范围const progressWidth = oProgress.offsetWidth;const boxWidth = oBox.offsetWidth;const lineWidth = boxWidth / ulWidth * progressWidth; //5.设置滚动条的宽度oLine.style.width = lineWidth + 'px';// 计算滚动条最大能够滚动的范围const maxLineX = progressWidth - lineWidth;// 计算图片最大能够滚动的范围const maxImgX = boxWidth - ulWidth;  //6.监听鼠标按下的事件oLine.onmousedown = function(e) {e = e || window.e;//a.拿到滚动条当前的位置let begin = parseFloat(oLine.style.left) || 0; //b.拿到鼠标在滚动条中按下的位置let mouseX = e.pageX - oBox.offsetLeft; //7.监听鼠标移动事件oLine.onmousemove = function(e) {e = e || window.e;//c.拿到鼠标在滚动条中移动之后的位置let moveMouseX = e.pageX - oBox.offsetLeft; //d.计算偏移位let offsetX = moveMouseX - mouseX + begin; //e.安全校验offsetX = offsetX < 0 ? 0 : offsetX;offsetX = offsetX > maxLineX ? maxLineX : offsetX;  //f.重新设置滚动条的位置oLine.style.left = offsetX + 'px'; //g.计算图片的滚动距离// 滚动条滚动的距离 / 滚动条最大能够滚动的范围 = 图片滚动的距离 / 图片最大能够滚动的范围// 滚动条滚动的距离 / 滚动条最大能够滚动的范围 * 图片最大能够滚动的范围 = 图片滚动的距离const imgOffsetX = offsetX / maxLineX * maxImgX; // h.重新设置图片的位置      oUl.style.left = imgOffsetX + "px";            };        };        document.onmouseup = function() {            oLine.onmousemove = null;}

关于“JavaScript如何实现橱窗展示效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。