JavaScript 跟隨滑鼠指標的粒子效果
分享一段程式碼例項,它實現了跟隨滑鼠指標移動的例子效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { width: 10px; height: 10px; background-color: darkmagenta; position: absolute; border-radius: 50%; } </style> <script type="text/javascript"> window.onload = function () { var divs = document.getElementsByTagName("div"); document.onmousemove = function () { divs[0].style.left= event.clientX + "px"; divs[0].style.top = event.clientY + "px"; for (var index = divs.length - 1; index > 0; index--) { divs[index].style.left = divs[index - 1].style.left; divs[index].style.top = divs[index - 1].style.top; } } document.onmouseup = function(){ document.onmousemove = null; } } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
上面的程式碼實現了我們的要求,程式碼比較簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).getElementsByTagName()參閱document.getElementsByTagName()一章節。
(2).onmousemove事件參閱JavaScript mousemove事件一章節。
(3).clientX參閱JavaScript event.clientX一章節。
(4).onmouseup事件參閱JavaScript mouseup事件一章節。
相關文章
- JavaScript跟隨滑鼠指標的粒子效果程式碼例項JavaScript指標
- 滑鼠指標一長串元素跟隨效果指標
- JavaScript、CSS實現滑鼠跟隨繁花效果JavaScriptCSS
- JavaScript跟隨滑鼠移動的圖片效果JavaScript
- javascript元素滑鼠跟隨效果程式碼例項詳解JavaScript
- JavaScript 獲取滑鼠指標的座標JavaScript指標
- JavaScript 元素跟隨滑鼠運動JavaScript
- 如何利用javascript改變滑鼠指標的形狀JavaScript指標
- CSS mask 實現滑鼠跟隨鏤空效果CSS
- js實現彈出層滑鼠跟隨效果JS
- jQuery跟隨滑鼠移動的彈出層效果jQuery
- 不可思議的純 CSS 實現滑鼠跟隨效果CSS
- canvas實現的跟隨滑鼠的彩色絲帶效果Canvas
- 一側具有滑鼠跟隨效果的垂直導航選單
- jquery css3跟隨滑鼠晃動的圖片效果jQueryCSSS3
- 滑鼠懸浮具有背景動畫跟隨效果的導航選單動畫
- CSS如何規定滑鼠指標的形狀CSS指標
- JavaScript:一個滑鼠動態跟隨文字特效的示例 (轉)JavaScript特效
- js跟隨滑鼠移動的元素JS
- javascript底部具有跟隨效果的橫向導航選單JavaScript
- Canvas + JavaScript 製作圖片粒子效果CanvasJavaScript
- 複製帶隨機指標的連結串列隨機指標
- win10滑鼠指標怎麼隱藏 win10隱藏滑鼠指標的步驟Win10指標
- 滑鼠懸浮彈出滑鼠跟隨層程式碼例項
- jQuery隨滑鼠旋轉的圖形效果jQuery
- 詳解c++指標的指標和指標的引用C++指標
- JavaScript隨機漂浮碰壁效果JavaScript隨機
- 【canvas】箭頭跟隨滑鼠移動的動畫原理Canvas動畫
- 指向指標的指標指標
- 指標的理解指標
- 指標的用法指標
- JavaScript 獲取滑鼠指標座標JavaScript指標
- LeetCode 複製帶隨機指標的連結串列LeetCode隨機指標
- jQuery大圖跟隨效果程式碼例項jQuery
- JS特效--跟隨滑鼠移動的日曆時鐘JS特效
- 跟隨滑鼠走的時鐘[跨瀏覽器支援]瀏覽器
- 空指標的救星指標
- JavaScript滑鼠懸浮出現下拉選單效果JavaScript