用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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。