JavaScript跟隨滑鼠移動的圖片效果
本章節分享一段程式碼例項,它實現了圖片跟隨滑鼠指標的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #antzone{ position:absolute; } img{ width:150px; height:100px; } </style> <script type="text/javascript"> function DivFlying(ev){ var ev=window.event||ev; var odiv=document.getElementById("antzone"); if(!odiv){ return; } var intX=ev.clientX; var intY=ev.clientY; odiv.style.left=intX+"px"; odiv.style.top=intY+"px"; } document.onmousemove=DivFlying; </script> </head> <body> <div id="antzone"><img src="img/1.jpg"/></div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).function DivFlying(ev){},這個是onmousemove時間處理函式,引數是事件物件。
(2).var ev=window.event||ev,相容所有瀏覽器的事件物件。
(3).var odiv=document.getElementById("antzone"),獲取指定的元素物件。
(4).if(!odiv){
return;
},如果不存在指定元素,那麼直接跳出函式。
(5).var intX=ev.clientX,獲取滑鼠指標在瀏覽器客戶區的橫座標。
(6).var intY=ev.clientY,獲取滑鼠指標在瀏覽器客戶區的縱座標。
(7).odiv.style.left=intX+"px",設定元素的left屬性值。
二.相關閱讀:
(1).var ev=window.event||ev參閱var ev=window.event||ev的作用是什麼一章節。
(2).clientX參閱javascript clientX一章節。
相關文章
- jquery css3跟隨滑鼠晃動的圖片效果jQueryCSSS3
- jQuery跟隨滑鼠移動的彈出層效果jQuery
- JavaScript 跟隨滑鼠指標的粒子效果JavaScript指標
- js跟隨滑鼠移動的元素JS
- JavaScript、CSS實現滑鼠跟隨繁花效果JavaScriptCSS
- JavaScript 元素跟隨滑鼠運動JavaScript
- js滑鼠移動實現圖片立體滾動效果JS
- 【canvas】箭頭跟隨滑鼠移動的動畫原理Canvas動畫
- javascript元素滑鼠跟隨效果程式碼例項詳解JavaScript
- JavaScript跟隨滑鼠指標的粒子效果程式碼例項JavaScript指標
- JS特效--跟隨滑鼠移動的日曆時鐘JS特效
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- canvas實現的跟隨滑鼠的彩色絲帶效果Canvas
- CSS mask 實現滑鼠跟隨鏤空效果CSS
- js實現彈出層滑鼠跟隨效果JS
- 滑鼠指標一長串元素跟隨效果指標
- jQuery 滑鼠懸浮連結彈出跟隨圖片詳解jQuery
- JavaScript:一個滑鼠動態跟隨文字特效的示例 (轉)JavaScript特效
- CSS滑鼠移動圖片切換功能CSS
- 不可思議的純 CSS 實現滑鼠跟隨效果CSS
- jQuery隨滑鼠旋轉的圖形效果jQuery
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- 一側具有滑鼠跟隨效果的垂直導航選單
- [unity3d]如何實現遊戲物件跟隨滑鼠方向移動Unity3D遊戲物件
- 滑鼠放在圖片實現高亮效果
- 滑鼠懸浮具有背景動畫跟隨效果的導航選單動畫
- JavaScript30 中文指南 - 13 圖片隨螢幕滾動而滑入滑出的效果指南JavaScript
- JS仿QQ空間滑鼠停在長圖片時候圖片自動上下滾動效果JS
- CSS滑鼠懸浮圖片動畫放大效果CSS動畫
- JavaScript 圖片放大鏡效果JavaScript
- jQuery滑鼠懸浮當前圖片高亮其他圖片灰暗效果jQuery
- jQuery大圖跟隨效果程式碼例項jQuery
- VS+Qt+Halcon——顯示圖片,實現滑鼠縮放、移動圖片QT
- 通過JavaScript如何做一個仿京東的跟隨圖片放大鏡效果?(附加註釋)簡單實用。JavaScript
- javascript底部具有跟隨效果的橫向導航選單JavaScript
- CSS滑鼠懸浮圖片模糊切換效果CSS
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果