这种进度条 说白了就是 全部都用比例 1.用比例求出进度条的长(宽) 公式:
滚动条的宽(这里的宽不能用mask.offsetwidth) / 盒子的宽 = 盒子的宽 /内容 ul 的宽
2:让 ul(商品的内容)跟着进度条一起等比例滚动 这个也用到一个公式 :
滚动条所移动的距离/ul滚动的距离 = (盒子的宽-进度条的距离)/(ul宽 -盒子的宽)
javascript 代码如下
<script src="js/MyFunc.js"></script>
<script>
window.onload = function () {
// 1. 获取需要的标签
var box =document.getElementById('box');
var oUl = box.children[0];
var list = oUl.children;
var footer = box.children[1];
var mask = footer.children[0];
//获取滚动条的宽
//滚动条的宽(这里的宽不能用mask.offsetwidth) / 盒子的宽 = 盒子的宽 /内容 ul 的宽
mask.length= box.offsetWidthbox.offsetWidth/oUl.offsetWidth;
mask.style.width = mask.length + 'px';
mask.onmousedown = function (event) {
var event = event || window.event;
//获取被点击的点 也就是该点到它自身左边的距离
// var distanceX = event.clientX - mask.offsetParent.offsetWidth;//注意 这里不是减去它父亲的左边距离
var distanceX = event.clientX - mask.offsetWidth;
// console.log(distanceX);
window.onmousemove = function (event) {
var event = event || window.event;
//获取在被点击中的该以后所移动了以后 距离左边的距离
var leftV = event.clientX - distanceX;
//限制两边 移动的 范围
if (leftV<0) {
leftV = 0;
}else if (leftV>=box.offsetWidth - mask.offsetWidth) {
leftV = box.offsetWidth - mask.offsetWidth ;
}
//那么 span 移动的距离 就是移动后左边距离的多少
mask.style.left = leftV + 'px';
//让 图片(ul) 跟着移动 那么滚动条所移动的距离/ul滚动的距离 = (盒子的宽-进度条的距离)/(ul宽 -盒子的宽)
var oUl_move = leftV(oUl.offsetWidth - box.offsetWidth)/(box.offsetWidth - mask.offsetWidth);
//那么赋值给 oul
oUl.style.left = -oUl_move + 'px';
//为了不让点中的内容 图片不被选中 而设置 return false;
return false;
}
//清除鼠标抬起事件
window.onmouseup= function () {
window.onmousemove = null;
window.onmouseup=null;
return false;
}
}
}
</script>
