html js div隨滑鼠移動
阿新 • • 發佈:2018-12-11
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onmousemove</title> <style type="text/css"> #box1{ width:100px; height:100px; background-color:red; /*開啟box1的絕對定位*/ position:absolute; } </style> <script type="text/javascript"> /* *使div可以跟隨滑鼠移動 * */ window.onload = function(){ //獲取box1 var box1 = document.getElementById("box1"); //繫結滑鼠移動事件 document.onmousemove = function(event){ //解決相容問題 event = event || window.event; //獲取滾動滾動的距離。 //chrome認為滾動條是body。 //火狐等認為是瀏覽器的滾動條是html的。 var st = document.body.scrollTop || document.documentElement.scrollTop; var sl = document.body.scrollLeft || document.documentElement.scrollLeft; console.log(st); //獲取到滑鼠的座標 //用於獲取滑鼠在當前的可見視窗的座標 //在IE8中不支援 相容IE8 則不要使用 var left = event.clientX; var top = event.clientY; //設定div的偏移量 box1.style.left = left+ sl + "px"; box1.style.top = top+ st +"px"; } } </script> </head> <body style="height:5000px;"> <div id="box1"> </div> </body> </html>