<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> #parent{width: 400px;height: 20px;background-color: #eee;margin: 50px auto;position: relative;} #child{width: 20px;height: 20px;background-color: red;cursor: pointer;position: absolute;} #div2{width: 200px;height: 300px;background: yellow;border: 1px solid black;position: relative;overflow: hidden;} #div3{position: absolute;} </style> <script> window.onload=function() { var oDiv=document.getElementById('child'); var oParent=document.getElementById('parent'); var oDiv2=document.getElementById('div2'); var oDiv3=document.getElementById('div3'); oDiv.onmousedown=function(ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.offsetLeft; document.onmousemove=function(ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; if(l<0) { l=0; } else if(l>oParent.offsetWidth-oDiv.offsetWidth) { l=oParent.offsetWidth-oDiv.offsetWidth; } oDiv.style.left=l+'px'; var scale=l/(oParent.offsetWidth-oDiv.offsetWidth); oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+'px'; document.title=scale; }; document.onmouseup=function() { document.onmousemove=null; document.onmouseup=null; }; }; }; </script> </head> <body> <div id="parent"> <div id="child"></div> </div> <div id="div2"> <div id="div3"> 永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！ </div> </div> </body> </html>