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元素滑鼠跟隨效果程式碼例項詳解JavaScript
- 滑鼠懸浮彈出滑鼠跟隨層程式碼例項
- jQuery大圖跟隨效果程式碼例項jQuery
- 滑鼠指標一長串元素跟隨效果指標
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- JavaScript、CSS實現滑鼠跟隨繁花效果JavaScriptCSS
- JavaScript跟隨滑鼠移動的圖片效果JavaScript
- 拖動滾動條實現div跟隨效果程式碼例項
- 滑鼠懸浮評分效果程式碼例項
- JavaScript日曆效果程式碼例項JavaScript
- JavaScript 獲取滑鼠指標的座標JavaScript指標
- css滑鼠懸浮tips效果程式碼例項CSS
- 滑鼠懸浮實現翻牌效果程式碼例項
- javascript生成隨機數程式碼例項JavaScript隨機
- JavaScript隨機點名程式碼例項JavaScript隨機
- JavaScript 元素跟隨滑鼠運動JavaScript
- JavaScript點選投票效果程式碼例項JavaScript
- JavaScript留言板效果程式碼例項JavaScript
- javascript淡入淡出效果程式碼例項JavaScript
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- JavaScript多級選項卡效果程式碼例項JavaScript
- CSS自定義滑鼠指標形狀程式碼例項CSS指標
- css自定義滑鼠指標圖示程式碼例項CSS指標
- 滑鼠懸浮實現抖動效果例項程式碼
- 滑鼠虛滑過選項卡切換效果程式碼例項
- JavaScript產生隨機數例項程式碼JavaScript隨機
- javascript滑鼠懸浮行變色程式碼例項JavaScript
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- JavaScript網頁鎖屏效果程式碼例項JavaScript網頁
- javascript元素迴圈插入效果程式碼例項JavaScript
- 如何利用javascript改變滑鼠指標的形狀JavaScript指標
- 判斷滑鼠指標移入移出的方向程式碼例項指標
- 滑鼠懸浮文字實現霓虹燈效果程式碼例項
- 滑鼠按住拖動具有半透明效果的程式碼例項
- 滑鼠懸浮連結出現音效效果程式碼例項
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- 滑鼠滑過實現淡入淡出效果程式碼例項