JavaScript实现橱窗展示效果_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;
}
<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;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持3399IT网。
本文为网络共享文章,如有侵权请联系邮箱485837881@qq.com