JavaScript 元素跟隨滑鼠運動
分享一段程式碼例項,它實現了元素跟隨滑鼠運動的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; } #round { width: 40px; height: 40px; background-color: blueviolet; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-top: -10px; margin-left: -10px; } </style> <script type="text/javascript"> window.onload = function () { var roundObj = document.getElementById("round"); document.onmousemove = function () { roundObj.style.left = event.clientX + "px"; roundObj.style.top = event.clientY + "px"; } } </script> </head> <body> <div id="round"></div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).mousemove事件參閱JavaScript mousemove事件一章節。
(2).clientX參閱JavaScript event.clientX一章節。
相關文章
- js跟隨滑鼠移動的元素JS
- javascript元素滑鼠跟隨效果程式碼例項詳解JavaScript
- JavaScript跟隨滑鼠移動的圖片效果JavaScript
- JavaScript 跟隨滑鼠指標的粒子效果JavaScript指標
- 滑鼠指標一長串元素跟隨效果指標
- JavaScript、CSS實現滑鼠跟隨繁花效果JavaScriptCSS
- JavaScript:一個滑鼠動態跟隨文字特效的示例 (轉)JavaScript特效
- JavaScript跟隨滑鼠指標的粒子效果程式碼例項JavaScript指標
- 【canvas】箭頭跟隨滑鼠移動的動畫原理Canvas動畫
- jQuery跟隨滑鼠移動的彈出層效果jQuery
- javascript div元素滑鼠拖動效果詳解JavaScript
- JS特效--跟隨滑鼠移動的日曆時鐘JS特效
- JavaScript元素上下彈性運動JavaScript
- jquery css3跟隨滑鼠晃動的圖片效果jQueryCSSS3
- 滑鼠懸浮彈出滑鼠跟隨層程式碼例項
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- CSS mask 實現滑鼠跟隨鏤空效果CSS
- js實現彈出層滑鼠跟隨效果JS
- [unity3d]如何實現遊戲物件跟隨滑鼠方向移動Unity3D遊戲物件
- javascript元素水平運動程式碼例項JavaScript
- javascript元素勻速運動程式碼例項JavaScript
- 讓互動更加生動!有意思的滑鼠跟隨 3D 旋轉動效3D
- 不可思議的純 CSS 實現滑鼠跟隨效果CSS
- canvas實現的跟隨滑鼠的彩色絲帶效果Canvas
- 跟隨滑鼠走的時鐘[跨瀏覽器支援]瀏覽器
- JavaScript 陣列隨機不重複元素JavaScript陣列隨機
- 一側具有滑鼠跟隨效果的垂直導航選單
- JavaScript獲取滑鼠在元素中的座標JavaScript
- 基於canvas繪製的一個跟隨滑鼠變幻的動態背景線條Canvas
- jQuery 滑鼠懸浮連結彈出跟隨圖片詳解jQuery
- 滑鼠懸浮具有背景動畫跟隨效果的導航選單動畫
- javascript div元素彈性緩衝運動程式碼例項JavaScript
- JavaScript li元素的順序隨機打亂JavaScript隨機
- JavaScript 陣列中元素隨機打亂排序JavaScript陣列隨機排序
- JavaScript元素抖動效果JavaScript
- javascript實現的多元素緩衝運動程式碼例項JavaScript
- JavaScript滑鼠中鍵滾動事件JavaScript事件
- 移動端div跟隨滾動條滾動(自制