欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法

 更新時(shí)間：2015年02月02日 15:16:12   作者：yongh701  
這篇文章主要介紹了jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法,可實(shí)現(xiàn)實(shí)時(shí)顯示鼠標(biāo)坐標(biāo)的圖層跟隨鼠標(biāo)運(yùn)動(dòng)的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法。分享給大家供大家參考。具體分析如下：

一、基本目標(biāo)

寫一個(gè)跟隨鼠標(biāo)運(yùn)動(dòng)的圖層，

圖層中顯示當(dāng)前鼠標(biāo)的位置，

如下圖所示：

此圖層之所以使用jQuery，而不是因?yàn)閖avascript，是因?yàn)閖Query的代碼其便于兼容當(dāng)前的所有主流的瀏覽器，至少IE8是沒有任何問題的，不用像javascript大段大段的代碼都用到兼容性上面了。

二、制作過程

本次實(shí)驗(yàn)的核心是jquery里面的mousemove事件，

鼠標(biāo)移動(dòng)則觸發(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> 
<!--允許此圖層不按任何方式對(duì)齊，可以任何游離--> 
<div id="mousePosition" style="position:absolute;"></div> 
<script> 
/*一對(duì)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>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論