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>
