JavaScript抖動效果
d抖動效果應用場景較多,比如登陸框,當輸入使用者名稱或者密碼錯誤的時候,出現抖動效果,提示明顯,且有動感,下面就是一段空元素抖動的程式碼例項,希望能夠給大家帶來一定的幫助。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js實現的元素抖動效果</title> <style type="text/css"> #control { height:100px; width:100px; background:gray; } </style> <script type="text/javascript"> function shake(e,onComplete,distance,interval){ if(typeof e==="string"){ e=document.getElementById(e); } distance=distance||8; interval=interval||800; var originalStyle=e.style.cssText; e.style.position="relative"; var start=(new Date()).getTime(); animate(); function animate(){ var now=(new Date()).getTime(); var elapsed=now-start; var progress=elapsed/interval; if(progress<1){ var y=distance*Math.sin(Math.PI*progress*4); var x=distance*Math.cos(Math.PI*progress*4); e.style.left=x+"px"; e.style.top=y+"px"; setTimeout(animate, Math.min(25, elapsed)); } else{ e.style.cssText=originalStyle; if(onComplete){ onComplete(e); } } } } window.onload=function(){ var control=document.getElementById("control"); control.onclick=function(){shake(this)} } </script> </head> <body> <div id="control"> </div> </div> </body> </html>
以上程式碼實現了抖動效果,當點選灰色區域的時候,能夠實現緩衝的抖動效果。
相關文章
- JavaScript元素抖動效果JavaScript
- JavaScript 視窗抖動效果JavaScript
- Flutter抖動動畫、顫抖動畫、Flutter文字抖動效果Flutter動畫
- Android - 控制元件抖動效果Android控制元件
- css3動畫效果抖動解決CSSS3動畫
- Android 翻頁效果加蘋果桌面應用抖動效果Android蘋果
- JavaScript 簡單動畫效果JavaScript動畫
- 實現抖音 “影片無限滑動“效果
- JavaScript 限定範圍拖動效果JavaScript
- JavaScript簡單的動畫效果JavaScript動畫
- JavaScript表格tr行左右拖動效果JavaScript
- 記錄---實現抖音 “影片無限滑動“效果
- 11 個最好的 JavaScript 動態效果庫JavaScript
- JavaScript 動態進度條效果詳解JavaScript
- JavaScript自動更新時間效果詳解JavaScript
- JavaScript教程全套影片合集:DOM動畫效果JavaScript動畫
- 萬彩動畫大師教程 | 如何給字型新增抖動的動畫效果動畫
- JavaScript拖拽效果JavaScript
- JavaScript動態圓形鐘錶效果詳解JavaScript
- JavaScript跟隨滑鼠移動的圖片效果JavaScript
- JavaScript防抖實現JavaScript
- 成品直播原始碼推薦,js點選讓視窗抖動動畫效果原始碼JS動畫
- JavaScript 秒錶效果JavaScript
- JavaScript 動畫效果緩慢二級下拉選單JavaScript動畫
- javascript函式防抖DebounceJavaScript函式
- JavaScript 省市級聯效果JavaScript
- JavaScript之節流與防抖JavaScript
- 筆記-JavaScript[節流][防抖]筆記JavaScript
- JavaScript 圖片放大鏡效果JavaScript
- JavaScript 打字機效果詳解JavaScript
- JavaScript 秒錶效果詳解JavaScript
- JavaScript 表格隔行變色效果JavaScript
- JavaScript tab選項卡效果JavaScript
- JavaScript抽獎效果詳解JavaScript
- JavaScript模擬拋物效果JavaScript
- JavaScript隨機漂浮碰壁效果JavaScript隨機
- JavaScript 頁面跳轉效果JavaScript
- JavaScript中函式防抖、節流JavaScript函式
- HarmonyOS NEXT應用開發案例—使用彈簧曲線實現抖動動畫及手機振動效果案例動畫