js事件应用

weixin_30838921

于 2014-01-20 20:23:00 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kuangliu/p/3527466.html

---恢复内容开始---

一、自定义滚动条

 1 　　var oDiv=document.getElementById('div1');
 2     var oParent=document.getElementById('parent');
 3     var oDiv2=document.getElementById('div2');
 4     
 5     oDiv.onmousedown=function(ev){
 6         var oEvent=ev||event;
 7         var disX=oEvent.clientX-oDiv.offsetLeft;
 8         
 9         document.onmousemove=function(ev){
10             var oEvent=ev||event;
11             var l=oEvent.clientX-disX;document.title=l;
12             
13             if(l<0){
14                 l=0;
15             }else if(l>oParent.offsetWidth-oDiv.offsetWidth){
16                 l=oParent.offsetWidth-oDiv.offsetWidth;
17             }
18                         
19             oDiv.style.left=l+'px';
20             var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
21             
22             oDiv2.style.width=scale*300+'px';
23             oDiv2.style.height=30+'px';
24         }
25         document.onmouseup=function(){
26             document.onmousemove=null;
27             document.onmouseup=null;
28         }
29     }