滑鼠懸浮實現抖動效果例項程式碼
在不少的網頁中都有這樣的效果,當滑鼠放在某個元素的時候,此元素出現抖動效果,之所以使用這種效果也許是為了效果醒目或者說純粹是為了動感等等,具體目的我們們就不管了,下面就介紹一下如何實現此效果。
程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>滑鼠懸浮抖動效果-螞蟻部落</title> <style type="text/css"> #thediv{ position:relative; width:100px; height:100px; background-color:red; left:100px; top:100px; } </style> <script type="text/javascript"> var type=["marginTop","marginLeft"]; var rangeN=10; var timeout=20; function shake(obj,end){ var range=Math.floor(Math.random()*rangeN); var typN=Math.floor(Math.random()*type.length); obj["style"][type[typN]]=""+range+"px"; var shakeTimer=setTimeout(function(){shake(obj,end)},timeout); obj[end]=function(){clearTimeout(shakeTimer)}; } window.onload=function(){ var thediv=document.getElementById("thediv"); thediv.onmouseover=function(){ shake(this,'onmouseout') } } </script> </head> <body> <div id="thediv"></div> </body> </html>
以上程式碼實現了抖動效果,程式碼比較簡單這裡就不多介紹了,如有問題可以跟帖留言。
相關閱讀:
(1).Math.floor()參閱javascript Math.floor()一章節。
(2).Math.random()參閱javascript Math.random()一章節。
(3).setTimeout()參閱window setTimeout()一章節。
(4).clearTimeout()參閱window clearTimeout()一章節。
相關文章
- 滑鼠懸浮實現翻牌效果程式碼例項
- 滑鼠懸浮文字實現霓虹燈效果程式碼例項
- 滑鼠懸浮評分效果程式碼例項
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- 滑鼠懸浮連結出現音效效果程式碼例項
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- css滑鼠懸浮tips效果程式碼例項CSS
- 滑鼠懸浮底部具有動態延伸條效果程式碼例項
- css滑鼠懸浮顏色動態填充效果程式碼例項CSS
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- css3實現滑鼠懸浮劃過光弧效果程式碼例項CSSS3
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- js文字內容感應滑鼠懸浮效果程式碼例項JS
- CSS3實現的滑鼠懸浮文字顏色漸變效果程式碼例項CSSS3
- 滑鼠懸浮彈出滑鼠跟隨層程式碼例項
- javascript滑鼠懸浮行變色程式碼例項JavaScript
- js實現的元素抖動效果程式碼例項JS
- js滑鼠懸浮字串實現字串跳動效果JS字串
- 滑鼠懸浮連結彈出提示程式碼例項
- 滑鼠懸浮div實現旋轉效果
- 滑鼠懸浮出現tips提示框效果程式碼例項
- 滑鼠懸浮改變連結樣式程式碼例項
- 滑鼠懸浮實現環形旋轉效果
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- 滑鼠懸浮可以伸縮的搜尋框程式碼例項
- 自定義滑鼠懸浮連結彈出提示程式碼例項
- 滑鼠懸浮實現連結背景變色效果
- css3實現滑鼠懸浮文字水平晃動效果CSSS3
- 滑鼠懸浮出現下拉選單程式碼例項
- [譯] CSS 變數實現炫酷滑鼠懸浮效果CSS變數
- 實現滑鼠懸浮table表格行背景變色效果
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- 滑鼠懸浮於連結<a>之上出現提示文字效果程式碼
- CSS實現的滑鼠懸浮整行背景變色程式碼CSS
- 滑鼠滑過實現淡入淡出效果程式碼例項
- css3實現的滑鼠懸浮立體動態按鈕效果CSSS3