jQuery實現(xiàn)跟隨鼠標(biāo)運動圖層效果的方法
更新時間：2015年02月02日 15:16:12 作者：yongh701
這篇文章主要介紹了jQuery實現(xiàn)跟隨鼠標(biāo)運動圖層效果的方法,可實現(xiàn)實時顯示鼠標(biāo)坐標(biāo)的圖層跟隨鼠標(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ā)。
代碼如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
<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)文章
這篇文章主要為大家詳細(xì)介紹了jQuery zTree樹插件簡單使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果
這篇文章主要介紹了jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果,涉及jquery鼠標(biāo)hover事件及show與hide操作頁面元素的顯示與隱藏效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
最近在學(xué)習(xí)JQuery，其實也不叫學(xué)習(xí)，很久以前就學(xué)過，只是有一段時間沒用，有些生疏了，于是就做幾個小例子來練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來2012-09-09
基于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ā)件人操作功能，認(rèn)為這個太過簡單的可以離開了。2011-01-01
$ is not defined這種提示想必在調(diào)試時經(jīng)常會遇到吧，經(jīng)過搜索查詢了一下結(jié)果是引入Jquery的順序不對，改過來就可以了，有此問題的朋友可以參考下哈2013-04-04
在本篇文章里小編給大家整理了關(guān)于jquery如何將信息遍歷到界面上的實例代碼內(nèi)容，需要的朋友們可以參考下。2020-01-01
這篇文章主要介紹了如何寫一個含驗證碼的登錄界面，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
詳解使用jQuery.i18n.properties實現(xiàn)js國際化
這篇文章主要介紹了使用jQuery.i18n.properties實現(xiàn)js國際化，具有一定的參考價值，感興趣的可以隨小編看一看2018-05-05
JQuery Ajax執(zhí)行跨域請求數(shù)據(jù)的解決方案
今天小編就為大家分享一篇關(guān)于JQuery Ajax執(zhí)行跨域請求數(shù)據(jù)的解決方案，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12