按下鼠标,盒子动起来
作者:互联网
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: #0ff; position: absolute; left: 0; top:0; } </style> </head> <body> <div class="box"></div> <script type="text/javascript"> var box=document.querySelector(".box"); var e=event||window.event; box.onmousedown=function(e){ var ox=e.clientX-this.offsetLeft; var oy=e.clientY-this.offsetTop; console.log(ox+" "+oy) document.onmousemove=function(e){ box.style.left=e.clientX-ox+'px'; box.style.top=e.clientY-oy+'px'; } box.onmouseup=function(){ document.onmousemove=null } } </script> </body> </html>
标签:box,function,盒子,鼠标,按下,oy,ox,var,document 来源: https://www.cnblogs.com/daifuchao/p/11761155.html