js实现自定义滚动条的示例
自定义滚动条
目录
代码实例
*{
padding:0;
margin:0;
}
#box1{
width:500px;
height:20px;
background:#999;
position:relative;
margin:20pxauto;
}
#box2{
width:20px;
height:20px;
background:green;
position:absolute;
}
#box3{
width:0;
height:0;
margin:20pxauto;
}
#box3img{
width:100%;
height:100%;
}
//获取dom元素
varoBox1=document.getElementById('box1');
varoBox2=document.getElementById('box2');
varoBox3=document.getElementById('box3');
//按下滚动条后的操作
oBox2.onmousedown=function(e){
//获取事件的必备操作，保证事件被获取
varoEvent=e||event
//保证只有被按下滚动条后才能执行此函数
document.onmousemove=function(e){
varoEvent=e||event
varl=oEvent.clientX-oBox1.offsetLeft
//获取滚动条可活动的宽度范围
varwid=oBox1.offsetWidth-oBox2.offsetWidth
if(l<0){
l=0
}elseif(l>wid){
l=wid
}
//位置定位
oBox2.style.left=l+'px'
//根据滚动条位置获得比例
varscale=l/wid
//图片的宽度和高度
varw=3264*scale
varh=4080*scale
//oBox3.style.cssText是加在内嵌style中的
oBox3.style.cssText+='width:'+w+'px;height:'+h+'px;'
}
//保证鼠标松开后事件不再执行
document.onmouseup=function(){
document.onmousemove=null
document.onmousedown=null
}
}
代码解析
elem.style.cssText是加在内嵌style中的
//oBox3.style.cssText是加在内嵌style中的
oBox3.style.cssText+='width:'+w+'px;height:'+h+'px;
下载源码链接
星辉的Github
以上就是js实现自定义滚动条的示例的详细内容，更多关于js实现自定义滚动条的资料请关注毛票票其它相关文章！
