一，在網頁中添加一個獨立的顯示窗口，為窗口添加onmousedown和onmouseup事件來使窗口可以通過鼠標的拖拽移動。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/User3.js"></script> <style type="text/css"> body{ width: 2000px; height: 2000px; } .box{ width: 150px; height: 200px; position: absolute; right: 20px; border: 1px solid red; } .aff{ transition:all 1s; } </style> <script language="JavaScript"> /* obj.addEventListener(xEvent,fn, true) 事件冒泡 例: 當有父子關系的元素，都觸發單擊事件的時候，會形成事件流，事件流中的 事件會依順序逐個觸發。 addEventListener第三個參數說明 第三個參數是指事件的冒泡觸發順序，false 表示從子元素到父元素依次觸發事件。 true 表示從父元素到子元素依次觸發事件。 * */ function scrollEvent(obj,xEvent, fn) { if(obj.attachEvent){ obj.attachEvent("on"+xEvent,fn); } if(obj.addEventListener){ obj.addEventListener(xEvent,fn, true);//addEventListener w3c標准。 } } /*DOMMouseScroll mousewheel鼠標滾動后才會觸發事件。 scroll 鼠標滾動時就會觸發的事件*/ window.onload = function(){ dom.addClass( $("oDiv"),"aff"); var top=$("oDiv").style.top; top=parseInt(top); //添加scroll事件 scrollEvent(document,"scroll",function(){ var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; var h=scrollTop+top+"px"; $("oDiv").style.top=h; }); //鼠標按下事件 $("oDive").onmousedown = function(){ dom.removeClass($("oDiv"),"aff"); //獲取鼠標位置 var ev=window.event||event; var ofX= ev.clientX - $("oDiv").offsetLeft; var ofY= ev.clientY - $("oDiv").offsetTop; //鼠標移動事件 document.onmousemove = function(){ ev=window.event||event; var x=ev.clientX; var y= ev.clientY; $("oDiv").style.left = (x-ofX)+"px"; $("oDiv").style.top = (y-ofY)+"px"; } }; //鼠標離開位置 $("oDive").onmouseup = function(){ dom.addClass( $("oDiv"),"aff"); //移除事件 document.onmousemove = null; } } </script> </head> <!--事件冒泡--> <body > <div style="top:40px;" class="box" id="oDiv"> <div style="height: 30px;background-color: #000000;" id="oDive"></div> </div> </body> </html>