js進階 12-3 如何實現元素跟隨鼠標移動
一、總結
一句話總結:獲取鼠標位置,將鼠標位置設置為元素偏移即可。
1、用什么事件獲取鼠標位置?
用mousemove可以獲取鼠標移動的時候的位置
$(document).mousemove(function(e){
2、mousemove的調用對象是誰?
想知道在哪個里面動,就調誰,這里是document
$(document).mousemove(function(e){
3、如何獲取鼠標的具體坐標?
event對象的pageX和pageY屬性
$(document).mousemove(function(e){ //event.pageX/event.pageY鼠標相對於文檔的坐標位置。 var x=e.pageX+'px'; var y=e.pageY+'px'; $('#txt').val(x+' '+y)
4、動態測試變量的值用什么方法好?
將值動態的顯示在標簽中,就像示例一樣。
二、如何實現元素跟隨鼠標移動
1、相關知識
- mousemove() 當鼠標指針在指定的元素中移動時觸發。
2、代碼
<!DOCTYPE html> <html lang="en"> <style> </style> <head> <meta charset="UTF-8"> <title>演示文檔</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <style type="text/css"> #div1{width: 100px;height: 100px;background: orange;border-radius: 50px;position: absolute;} </style> </style> </head> <body> <div id="div1"></div> <p>鼠標坐標(mousemove):<input type="text" id="txt"></p> <script type="text/javascript"> $(document).mousemove(function(e){ //event.pageX/event.pageY鼠標相對於文檔的坐標位置。 var x=e.pageX+'px'; var y=e.pageY+'px'; $('#txt').val(x+' '+y) $("#div1").css({ 'left':x, 'top':y }) }) </script> </body> </html>