表單登入失敗左右晃動

admin發表於2018-07-16

大家對於表單驗證一定不會陌生。

當沒有通過驗證的時候通過會出現各種型別的提示效果。

本章節分享一段更為新穎的提示方式，當提交失敗的時候，會出現抖動效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{font:12px Georgia, serif;}
a{text-decoration:none;}
#box{
  width:400px;
  height:200px;
  background-color:#ccc;
  text-align:center
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
var box_left=0;
$(document).ready(function(){
  box_left = ($(window).width()-$('#box').width()) / 2;
  $('#box').css({
    'left':box_left,
    'position':'absolute'
  });
  $("a").click(function(){
    shock();
    return false;
  })
});
function shock(){       
  for(i=1;i<7;i++){
    $('#box').animate({
      'left':'-=15'
    }, 3, function() {
      $(this).animate({
        'left': '+=30'
      }, 3, function() {
        $(this).animate({
          'left': '-=15'
        }, 3, function() {
          $(this).animate({
            'left': box_left
          },3);
        });
      });
    });
  }
}
</script>
</head>
<body>
<div id="box"><a href="#">檢視效果</a></div>
</body>
</html>

並不是一個表單登入，但原理如此，只要改造一下即可，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var box_left=0，宣告一個變數並賦值為0。

（2）.$(document).ready(function(){})，文件結構完全載入完畢再去執行函式中的程式碼。

（3）.box_left = ($(window).width()-$('#box').width()) / 2，計算出div元素left屬性值，此值會使元素水平居中。

（4）.$('#box').css({

  'left':box_left,

  'position':'absolute'

})，設定div元素的位置。

（5）.$("a").click(function(){

  shock();

  return false;

})，為連結a註冊click事件處理函式，shock實現了晃動效果，return false可以取消連結a的跳轉效果。

（6）.function shock(){}，此函式可以實現元素的左右晃動效果。

（7）.for(i=1;i<7;i++){

  $('#box').animate({

    'left':'-=15'

  }, 3, function() {

    $(this).animate({

      'left': '+=30'

    }, 3, function() {

      $(this).animate({

        'left': '-=15'

      }, 3, function() {

        $(this).animate({

          'left': box_left

        }, 3,);

      });

    });

  });

}使用for迴圈方式連續執行七次動畫。

其實就是不斷的通過動畫方式設定left屬性值。

二.相關閱讀:

（1）.css方法參閱jQuery css()一章節。

（2）.return false參閱return false的作用是什麼一章節。

（3）.animate方法參閱jQuery animate()一章節。

相關文章