基于JavaScript實現(xiàn)鼠標箭頭移動圖片跟著移動
更新時間：2016年08月30日 09:07:42 投稿：mrr
這篇文章主要介紹了基于JavaScript實現(xiàn)鼠標箭頭移動圖片跟著移動的核心代碼，代碼比較簡單易懂,需要的朋友可以參考下
我們經(jīng)常在一些網(wǎng)站上看到，鼠標在網(wǎng)頁上移動，有一張圖片跟著鼠標移動。大家知道這種效果是怎么做出來的嗎?你可能感到比較復雜，其實他是用js編一段小程序來實現(xiàn)的，且代碼簡單，比較好理解。下面我就來分享下實現(xiàn)代碼。
關鍵代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js鼠標移到</title>
<script type="text/javascript">
function Divflying(){
var div=document.getElementById('dv1');
if (!div) {
return;
}
var intX=window.event.clientX;
var intY=window.event.clientY;
div.style.left=intX+"px";
div.style.top=intY+"px";
}
document.onmousemove=Divflying;
</script>
</head>
<body>
<div id="dv1" style="position:absolute;">
<img src="fly.jpg"><br>
低調(diào)的跟著鼠標飄過~~
</div>
</body>
</html>
以上所述是小編給大家介紹的基于JavaScript實現(xiàn)鼠標箭頭移動圖片跟著移動，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
微信小程序?qū)崿F(xiàn)購物頁面左右聯(lián)動
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)購物頁面左右聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
解析ScrollPic在ie8下只滾動一遍,然后變?yōu)榭瞻?ie6,ie7,chrome,firefox正常
解析ScrollPic在ie8下只滾動一遍,然后變?yōu)榭瞻?ie6,ie7,chrome,firefox都正常)2013-06-06
javascript之解決IE下不渲染的bug...2007-06-06
這篇文章主要介紹了JS回調(diào)函數(shù)簡單用法,結合實例形式分析了js回調(diào)函數(shù)的定義與簡單使用方法,具有一定參考借鑒價值,需要的朋友可以參考下2017-02-02
微信小程序數(shù)據(jù)監(jiān)聽器使用實例詳解
這篇文章主要介紹了微信小程序數(shù)據(jù)監(jiān)聽器使用實例，數(shù)據(jù)監(jiān)聽器用于監(jiān)聽和響應任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作。它的作用類似于vue中的watch偵聽器2023-04-04
Javascript中的this,bind和that使用實例
這篇文章主要介紹了Javascript中的this,bind和that使用實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
[紅色]如何實現(xiàn)iframe(嵌入式幀)的自適應高度...2006-07-07
js之彈出式窗口代碼生成器...2007-06-06
var用來聲明變量，但是這個語法并不嚴格要求，很多時修改，我們可以直接使用一個變量而不用var聲明它，不過還是建議大家加var2014-09-09
BootStrap3學習筆記(一)之網(wǎng)格系統(tǒng)
本文給大家介紹BootStrap3網(wǎng)格系統(tǒng)的相關知識，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05