jQuery實作跟隨滑鼠運動圖層效果的方法_jquery

本文實例講述了jQuery實現跟隨滑鼠運動圖層效果的方法。分享給大家供大家參考。具體分析如下：

一、基本目標

寫一個跟隨老鼠移動的圖層，

圖層中顯示目前滑鼠的位置，

如下圖：

此圖層之所以使用jQuery，而不是因為javascript，是因為jQuery的程式碼其便於相容當前的所有主流的瀏覽器，至少IE8是沒有任何問題的，不用像javascript大段大段的程式碼都用到相容性上面了。

二、製作過程

這次實驗的核心是jquery裡面的mousemove事件，

滑鼠移動則觸發。

程式碼如下：

複製代碼 代碼如下:

 
 
 
 
 
 
 
 
 
 

 
<script>  <br /> /*一對e.pageX與e.pageY則可以取到滑鼠目前的座標，注意則最初的函數宣告裡面使用e形式參數*/  <br /> $(document).mousemove(function (e) {  <br />     var x;  <br />     var y;  <br />     var xy="<br>x座標:" e.pageX "，y座標：" e.pageY;  <br />     x=e.pageX;  <br />     y=e.pageY;  <br />     document .getElementById("mousePosition").style.left = x "px";  <br />     document .getElementById("mousePosition").style.top = y "px";  <br />     $("#mousePosition").html(xy);  <br /> })  <br />   <br /> </script> 
 

希望本文所述對大家的jQuery程式設計有所幫助。