html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>橱窗</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
border: none;
}
img{
vertical-align: top;
}
.box{
width: 900px;
height: 300px;
margin: 40px auto;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
}
#box-top ul{
width: 2100px;
position: absolute;
left: 0;
top:40px
}
#box-top li{
float: left;
margin-right: 5px;
}
#box-bot{
width: 100%;
height: 25px;
background: #727272;
position: absolute;
left: 0;
bottom: 0;
}
#mask{
width: 0;
height: 100%;
background: orange;
position: absolute;
left: 0;
top:0;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="box">
<div id="box-top">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
<li><img src="images/8.jpg" alt=""></li>
</ul>
</div>
<div id="box-bot">
<span id="mask"></span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
js部分
window.addEventListener('load',function () {
let box=document.getElementsByClassName("box")[0]
let boxtop=document.getElementById("box-top")
let oul=boxtop.getElementsByTagName("ul")[0]
let mask=document.getElementById("mask")
//求出mask的宽度
//滚动条长度=（盒子宽度/内容宽度）* 盒子宽度
let mask_len=(box.offsetWidth/oul.offsetWidth)*box.offsetWidth
mask.style.width=mask_len+"px"
//鼠标操作
mask.onmousedown=function () {
let e=window.event || arguments[0]
//求出鼠标初始位置
let beginX=e.clientX-mask.offsetLeft
//求mask移动距离
document.onmousemove=function () {
let e=window.event || arguments[0]
let endX=e.clientX-beginX
if(endX<0){
endX=0
}else if(endX>=box.offsetWidth-mask.offsetWidth){
endX=box.offsetWidth-mask.offsetWidth
}
mask.style.left=endX+"px"
// 内容走的长度=(内容长度-盒子长度)/(盒子长度-滚动条长度)*滚动条走的距离
let contentW=(oul.offsetWidth-box.offsetWidth)/(box.offsetWidth-mask.offsetWidth)*endX
oul.style.left=-contentW+"px"
return false
}
document.onmouseup=function () {
document.onmousemove=null
}
}
})
1.获取滚动条长度
滚动条长度/盒子长度=盒子长度/内容长度
滚动条长度=（盒子宽度/内容宽度）* 盒子宽度
2.拖动滚动条，求内容走的长度
内容走的距离/滚动条走的距离=(内容长度-盒子长度)/(盒子长度-滚动条长度)
内容走的长度=(内容长度-盒子长度)/(盒子长度-滚动条长度)*滚动条走的距离