jQuery實現(xiàn)跟隨鼠標(biāo)運動圖層效果的方法
本文實例講述了jQuery實現(xiàn)跟隨鼠標(biāo)運動圖層效果的方法。分享給大家供大家參考。具體分析如下:
一、基本目標(biāo)
寫一個跟隨鼠標(biāo)運動的圖層,
圖層中顯示當(dāng)前鼠標(biāo)的位置,
如下圖所示:
此圖層之所以使用jQuery,而不是因為javascript,是因為jQuery的代碼其便于兼容當(dāng)前的所有主流的瀏覽器,至少IE8是沒有任何問題的,不用像javascript大段大段的代碼都用到兼容性上面了。
二、制作過程
本次實驗的核心是jquery里面的mousemove事件,
鼠標(biāo)移動則觸發(fā)。
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mouse</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>
<body>
<!--允許此圖層不按任何方式對齊,可以任何游離-->
<div id="mousePosition" style="position:absolute;"></div>
<script>
/*一對e.pageX與e.pageY則可以取到鼠標(biāo)當(dāng)前的坐標(biāo),注意則最初的函數(shù)聲明里面使用e形式參數(shù)*/
$(document).mousemove(function (e) {
var x;
var y;
var xy="<br>x坐標(biāo):"+e.pageX+",y坐標(biāo):"+e.pageY;
x=e.pageX;
y=e.pageY;
document .getElementById("mousePosition").style.left = x + "px";
document .getElementById("mousePosition").style.top = y + "px";
$("#mousePosition").html(xy);
})
</script>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- jquery實現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果
- jQuery彈性滑動導(dǎo)航菜單實現(xiàn)思路及代碼
- Jquery實現(xiàn)彈性滑塊滑動選擇數(shù)值插件
- jQuery實現(xiàn)背景彈性滾動的導(dǎo)航效果
- 基于jQuery的煙花效果(運動相關(guān))點擊屏幕出煙花
- jQuery實現(xiàn)的分子運動小球碰撞效果
- jQuery拋物線運動實現(xiàn)方法(附完整demo源碼下載)
- jQuery實現(xiàn)橫向帶緩沖的水平運動效果(附demo源碼下載)
- jquery模擬實現(xiàn)鼠標(biāo)指針停止運動事件
- jQuery模擬物體自由落體運動(附演示與demo源碼下載)
- jquery animate動畫持續(xù)運動的實例
- jQuery插件實現(xiàn)彈性運動完整示例
相關(guān)文章
jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果
這篇文章主要介紹了jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果,涉及jquery鼠標(biāo)hover事件及show與hide操作頁面元素的顯示與隱藏效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08基于jQuery的AJAX和JSON實現(xiàn)純html數(shù)據(jù)模板
jQuery內(nèi)置的AJAX功能,直接訪問后臺獲得JSON格式的數(shù)據(jù),從而實現(xiàn)純html數(shù)據(jù)模板,下面主要給大家介紹實現(xiàn)代碼,感興趣的朋友一起看下吧2016-08-08用jquery實現(xiàn)的模擬QQ郵箱里的收件人選取及其他效果(一)
今天要說的是用jquery的語法和組件dialog及Autocomplete來制作QQ郵箱的發(fā)件人操作功能,認為這個太過簡單的可以離開了。2011-01-01詳解使用jQuery.i18n.properties實現(xiàn)js國際化
這篇文章主要介紹了使用jQuery.i18n.properties實現(xiàn)js國際化,具有一定的參考價值,感興趣的可以隨小編看一看2018-05-05JQuery Ajax執(zhí)行跨域請求數(shù)據(jù)的解決方案
今天小編就為大家分享一篇關(guān)于JQuery Ajax執(zhí)行跨域請求數(shù)據(jù)的解決方案,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2018-12-12