自定义滚动条 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7              #parent{width: 600px;height:20px;background-color:#CCC;position: relative; margin: 10px auto;}
 8             #div1{width: 20px;height:20px;background-color:red;position: absolute;left: 0;top: 0;}
 9             #div2{width: 0px;height:0px;background-color:green;position: absolute;}
10         </style>
11         <script>
12             window.onload=function(){
13                 var oDiv=document.getElementById('div1');
14                 var oDiv2=document.getElementById('div2');
15                 var oParent=document.getElementById('parent');
16                 var disX=0;
17 
18                 oDiv.onmousedown=function(ev){
19                     var oEvent=ev||event;
20 
21                     disX=oEvent.clientX-oDiv.offsetLeft;
22 
23                     document.onmousemove=function(ev){
24                         var oEvent=ev||event;
25                         var l=oEvent.clientX-disX;
26 
27                         if(l<0){
28                             l=0;
29                         }
30                         else if(l>oParent.offsetWidth-oDiv.offsetWidth){
31                             l=oParent.offsetWidth-oDiv.offsetWidth;
32                         }
33 
34                         oDiv.style.left=l+'px';
35 
36                         var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
37 
38                         document.title=scale;
39 
40                         oDiv2.style.width=400*scale+'px';
41                         oDiv2.style.height=400*scale+'px';
42                     }
43 
44                     document.onmouseup=function(ev){
45                         document.onmousemove=null;
46                         document.onmouseup=null;
47                     }
48 
49                     return false;
50                 }
51             }
52         </script>
53     </head>
54     <body>
55         <div id="parent">
56             <div id="div1">
57             </div>
58         </div>
59         <div id="div2">
60 
61         </div>
62     </body>
63 </html>
自定义滚动条

 

posted @ 2020-04-29 15:58  孝文  阅读(103)  评论(0)    收藏  举报