JavaScript抖動效果

antzone發表於2017-03-15
原文網址 : https://www.softwhy.com/article-3417-1.html
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>

以上程式碼實現了抖動效果，當點選灰色區域的時候，能夠實現緩衝的抖動效果。

相關文章