JavaScript实现橱窗展示效果
程序员文章站
2022-06-17 19:30:54
本文实例为大家分享了javascript实现橱窗展示效果的具体代码,供大家参考,具体内容如下1.先搭架子* { margin: 0; padding: 0;...
本文实例为大家分享了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" alt=""> </li> <li> <img src="images/img2.jpg" alt=""> </li> <li> <img src="images/img3.jpg" alt=""> </li> <li> <img src="images/img4.jpg" alt=""> </li> <li> <img src="images/img5.jpg" alt=""> </li> <li> <img src="images/img6.jpg" alt=""> </li> <li> <img src="images/img7.jpg" alt=""> </li> <li> <img src="images/img8.jpg" alt=""> </li> <li> <img src="images/img9.jpg" alt=""> </li> <li> <img src="images/img10.jpg" alt=""> </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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。