用js實現一個磚頭在頁面，但鼠標點擊拖動時，磚頭在頁面上形成拖拉效果：
剛開始時：
鼠標點擊拖動后：
實現代碼：
<html> <head> <meta charset="utf-8"> <style type="text/css"> *{ margin:0px; padding:0px; } #zhuantou{ width:120px; height:60px; background-image:url(1.jpg); position:fixed; left:100px; top:50px; } </style> <body> <div id="zhuantou"> </div> <script> var zt=document.querySelector("#zhuantou"); var isPressed=false; var offsetX=0; var offsetY=0; zt.onmousedown=function(event){ isPressed=true; this.style.cursor="move"; offsetX=event.offsetX; offsetY=event.offsetY; }; zt.onmouseup=function(){ isPressed=false; this.style.cursor="default"; }; zt.onmousemove=function(event){ if(!isPressed){ return; } zt.style.left=(event.clientX-offsetX)+"px"; zt.style.top=(event.clientY-offsetX)+"px"; }; </script> </body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
