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