基于JavaScript實現鼠標箭頭移動圖片跟著移動
更新時間：2016年08月30日 09:07:42 投稿：mrr
這篇文章主要介紹了基于JavaScript實現鼠標箭頭移動圖片跟著移動的核心代碼，代碼比較簡單易懂,需要的朋友可以參考下
我們經常在一些網站上看到，鼠標在網頁上移動，有一張圖片跟著鼠標移動。大家知道這種效果是怎么做出來的嗎?你可能感到比較復雜，其實他是用js編一段小程序來實現的，且代碼簡單，比較好理解。下面我就來分享下實現代碼。
關鍵代碼如下所示：
<!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>
低調的跟著鼠標飄過~~
</div>
</body>
</html>
以上所述是小編給大家介紹的基于JavaScript實現鼠標箭頭移動圖片跟著移動，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
下面小編就為大家?guī)硪黄猨s enter鍵激發(fā)事件實例代碼。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript與Cookie之利用Cookie記錄用戶登錄信息2009-12-12
下面小編就為大家?guī)硪黄褂肑S實現圖片輪播的實例(前后首尾相接)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了微信小程序select下拉框實現效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了基于JS實現數字+字母+中文的混合排序方法的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
js 獲取本周、上周、本月、上月、本季度、上季度的開始結束日期
這篇文章主要介紹了js 獲取 本周、上周、本月、上月、本季度、上季度的開始結束日期,需要的朋友可以參考下2020-02-02
在前端開發(fā)中,我們經常需要將數據存儲在客戶端,以減少網絡請求次數,提高用戶體驗,localStorage 和 sessionStorage 是常用的存儲方案,但它們有一些局限性,為了解決這些問題,本文將介紹如何使用 localForage 實現一個帶過期時間的本地存儲方案,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細介紹了ionic3雙擊返回退出應用的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了JS版元素周期表實現方法,可實現基于javascript動態(tài)生成元素周期表的功能,點擊元素項可以在下方顯示對應元素的各種常用屬性,需要的朋友可以參考下2015-08-08
利用IntersectionObserver實現動態(tài)渲染的示例詳解
IntersectionObserver誕生已經有幾年了，所以它的兼容性目前已經達到可以使用的程度了。本文主要介紹了如何利用IntersectionObserver實現動態(tài)渲染，感興趣的可以了解一下2022-12-12