这篇文章主要为大家详细介绍了JS实现商品橱窗特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现商品橱窗特效的具体代码，供大家参考，具体内容如下
知识点
换算公式
① 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
滚动条长度/盒子的长度 = 盒子的长度/内容的长度
② 内容走的距离 = （内容的长度 - 盒子的长度）/ （盒子的长度 - 滚动条的长度）* 滚动条走的距离
运行效果
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; border:none; } #box{ width: 800px; height: 200px; border: 1px solid #ddd; position: relative; margin: 100px auto; overflow: hidden; } #box ul{ width: 5200px; position: absolute; left: 0; top: 20px; } #box ul li{ float: left; } #box_bottom{ position: absolute; left: 0; bottom: 0; background-color: #e8e8e8; width: 100%; height: 25px; } .mask{ position: absolute; left: 0; top:0; height: 25px; background-color: orangered; border-radius: 12px; cursor: pointer; } </style> </head> <body> <div> <ul> <li><img src="https://www.jb51.net/images/img1.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img2.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img3.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img4.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img5.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img6.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img7.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img8.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img1.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img2.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img1.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img2.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img3.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img4.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img5.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img6.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img7.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img8.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img1.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img2.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img1.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img2.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img3.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img4.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img5.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img6.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img7.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img8.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img1.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img2.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img1.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img2.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img3.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img4.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img5.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img6.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img7.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img8.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img1.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/img2.jpg" alt=""></li> </ul> <div> <span></span> </div> </div> <script> window.onload = function () { // 1. 获取需要的标签 var box = document.getElementById("box"); var box_top = document.getElementById("box_top"); var box_bottom = document.getElementById("box_bottom"); var mask = box_bottom.children[0]; // 2. 设置滚动条的长度 // 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度 var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth; mask.style.width = mask_len + 'px'; // 3. 鼠标操作 mask.onmousedown = function (event) { var e = event || window.event; // 3.1 求出初始值 var beginX = e.clientX - mask.offsetLeft; // 3.2 移动 document.onmousemove = function (event) { var e = event || window.event; // 3.3 求出移动的距离 var endX = event.clientX - beginX; // 边界值 if(endX < 0){ endX = 0; }else if(endX >= box.offsetWidth - mask.offsetWidth){ endX = box.offsetWidth - mask.offsetWidth; } // 3.4 动起来 mask.style.left = endX + 'px'; // 内容走的距离 = （内容的长度 - 盒子的长度）/ （盒子的长度 - 滚动条的长度）* 滚动条走的距离 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> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: