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>