<!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> function myAddEvent(obj,sEvent,fn) { if(obj.attachEvent) { obj.attachEvent('on'+sEvent,fn); } else { obj.addEventListener(sEvent,fn,false); } } window.onload=function() { var oDiv=document.getElementById('child'); var oParent=document.getElementById('parent'); var oDiv2=document.getElementById('div2'); var oDiv3=document.getElementById('div3'); function onMouseWheel(ev) { var oEvent=ev||event; var bDwon=true; //鼠标滚轮方向是否向下 bDwon=oEvent.wheelDelta?oEvent.wheelDelta < 0:oEvent.detail > 0; // alert(bDwon); if(bDwon) { setLeft(oDiv.offsetLeft+10); } else { setLeft(oDiv.offsetLeft-10); } if(oEvent.preventDefault) //FF 阻止默认事件（通过事件绑定的） { oEvent.preventDefault(); } return false; }; myAddEvent(oParent,'mousewheel',onMouseWheel); myAddEvent(oParent,'DOMMouseScroll',onMouseWheel); myAddEvent(oDiv2,'mousewheel',onMouseWheel); myAddEvent(oDiv2,'DOMMouseScroll',onMouseWheel); 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; setLeft(l); }; document.onmouseup=function() { document.onmousemove=null; document.onmouseup=null; }; }; function setLeft(l) { 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; }; }; </script> </head> <body> <div id="parent"> <div id="child"></div> </div> <div id="div2"> <div id="div3"> 永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！永远相信，美好的事情即将发生！ </div> </div> </body> </html>