JavaScript实现橱窗展示效果

这篇文章主要介绍了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; }

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; }