好资源导航 » 文章资讯 » JS自定义滚动条效果

JS自定义滚动条效果

2023-07-28 17:21:13 49

本文实例为大家分享了JS自定义滚动条的具体代码，供大家参考，具体内容如下





#all{
width:500px;
height:50px;
background-color:sandybrown;
border-radius:25px;
margin:0auto;
position:relative;
}
#div1{
width:50px;
height:50px;
border-radius:50%;
background-color:rosybrown;
position:absolute;
}
#box{
background-color:yellow;
position:absolute;
top:200px;
left:200px;
}

varoAll=document.getElementById("all"); varoDiv1=document.getElementById("div1"); varoBox=document.getElementById("box"); varmaxL=oAll.clientWidth-oDiv1.offsetWidth; oDiv1.onmousedown=function(){ varev=ev||window.event; varlessX=ev.clientX-oDiv1.offsetLeft; document.onmousemove=function(){ varev=ev||window.event; varposL=ev.clientX-lessX; if(posL<0){ posL=0; } if(posL>maxL){ posL=maxL; } oDiv1.style.left=posL+"px"; //滚动条移动的百分比 //oDiv1.offsetLeft/maxL varper=posL/maxL; //定义宽0~300 oBox.style.width=300*per+"px"; oBox.style.height=300*per+"px"; oBox.style.marginTop=-oBox.offsetHeight/2+"px"; oBox.style.marginLeft=-oBox.offsetWidth/2+"px"; } } document.onmouseup=function(){ document.onmousemove=null; }

更多关于滚动效果的精彩文章点击下方专题：

javascript滚动效果汇总

jquery滚动效果汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

JS自定义滚动条效果

热门推荐

随机推荐