本文實例講述了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程式設計有所幫助。