首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 16:16:16
原創
1458 人瀏覽過

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

一、基本目標

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

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

如下圖:

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

二、製作過程

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

滑鼠移動則觸發。

程式碼如下:

複製代碼 代碼如下:
 
 
 
 
mouse 
 
 
 
 
 
 
<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程式設計有所幫助。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板