本文实例为大家分享了js实现橱窗展示的具体代码,供大家参考,具体内容如下思路1、获取
本文实例为大家分享了js实现橱窗展示的具体代码,供大家参考,具体内容如下
思路
1、获取需要的标签
2、求出滚动条的长度(公式:滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度)
3、监听鼠标按下事件:3 设置起始位置
4、监听鼠标的移动:
4.1求出移动的位置 4.2判断滚动条的位置(防超出) 4.3 移动滚动条、商品滚动(公式:内容走的距离 = (内容的长度 - 盒子的长度) / (盒子长度 - 滚动条的长度) * 滚动条走的距离);
5、监听鼠标的离开事件:把鼠标的移动事件设置为无即可。
<script>
window.onload = function (){
//1.获取需要的标签
var box = document.getElementById("box");
var box_top = box.children[0];
var box_bottom = box.children[1];
var mask = box_bottom.children[0];
//2.获取滚动条长度
// 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
var mask_length = (box.offsetWidth /box_top.offsetWidth) * box.offsetWidth;
mask.style.width = mask_length + "px";
//3.监听鼠标按下的事件
mask.onmousedown = function (event){
var event = event || window.event;
//3.1设置起始位置
var beginX = event.clientX - mask.offsetLeft;
//3.2 监听鼠标的移动
document.onmousemove =function (event){
var event = event || window.event;
//3.2.1求移动的位置
var endX = event.clientX - beginX;
//3.2.2处理边界值
if(endX < 0){
endX = 0
}else if(endX >= box.offsetWidth - mask.offsetWidth){
endX = box.offsetWidth - mask.offsetWidth;
}
//3.2.3让滚动条滚动
mask.style.left = endX + "px";
//3.2.4 让商品随着滚动
//公式:内容走的距离 = (内容的长度 - 盒子的长度) / (盒子长度 - 滚动条的长度) * 滚动条走的距离
var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
box_top.style.left = -content_len + "px";
return false;
};
document.onmouseup = function (){
document.onmousemove = null;
}
}
}
</script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
js 橱窗