js实现的元素抖动效果代码实例

快乐打工仔 分类:实例代码

抖动效果在很多功能中都有应用,比如表单登录密码不正确的话,点击登录按钮就会以抖动的形式进行提示。

下面就通过代码实例介绍一下如何实现此效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#body{
  text-align:center;
}
#antzone{
  width:200px;
  position:absolute;
  margin:10px auto;
  height:100px;
  border:2px dotted red;
  text-align:center
}
</style>
<script type="text/javascript">
function SKclass (obj,Rate,speed) {
  var oL=obj.offsetLeft;
  var oT=obj.offsetTop;
  this.stop=null;
  this.oTime=null;
  var om=this;
  this.start=function(){
    if(parseInt(obj.style.left)==oL-2){
      obj.style.top=oT+2+"px";
      setTimeout(function(){obj.style.left=oL+2+"px"},Rate)
    }
    else{
      obj.style.top=oT-2+"px";
      setTimeout(function(){obj.style.left=oL-2+"px"},Rate)
    }
    this.oTime=setTimeout(function(){om.start()},speed);
  }
  this.stop=function(){
    clearTimeout(this.oTime);
  }
}
window.onload=function(){
  var m=document.getElementById("antzone");
  var nn=new SKclass(m,20,70);
  var shakeBt=document.getElementById("shake");
  var stBt=document.getElementById("st");
   
  shakeBt.onclick=function(){nn.start()}
  stBt.onclick=function(){nn.stop()}
}
</script>
</head>
<body>
<div style="margin:10px 200px">
  <div><input type="button" id="shake" value="点击抖动"/></div>
  <div><input type="button" id="st" value="逐渐停止抖动"/></div>
  <div id="antzone"></div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面就介绍一下它的实现过程。

一.代码注释:

(1).function SKclass (obj,Rate,speed) {},这是创建一个构造函数,第一个参数是要抖动的元素,第二个和第三个参数都是规定定时器函数延迟多长时间再去执行。

(2).var oL=obj.offsetLeft,在当前代码中是获取元素距离body左侧的距离。

(3).var oT=obj.offsetTop,在当前代码中是获取元素距离body顶部的距离。

(4).this.stop=null,创建一个属性,并赋值为null。

(5).this.oTime=null,这个属性是用作定时器函数的标识。

(6).var om=this,将this值赋值给变量om。

(7).this.start=function(){

  if(parseInt(obj.style.left)==oL-2){

   obj.style.top=oT+2+"px";

    setTimeout(function(){obj.style.left=oL+2+"px"},Rate)

}

  else{

    obj.style.top=oT-2+"px";

    setTimeout(function(){obj.style.left=oL-2+"px"},Rate)

  }

  this.oTime=setTimeout(function(){om.start()},speed);

},这段代码的功能就是让元素向左和向上2px范围内抖动。

最后一局是采用递归的方式调用this.start()方法,这样就实现了持续抖动。

(8).this.stop=function(){

  clearTimeout(this.oTime);

},停止定时器函数的执行。

二.相关阅读:

(1).构造函数可以参阅javascript构造函数简单介绍一章节。

(2).offsetLeft可以参阅js offsetLeft一章节。

(3).parseInt()方法可以参阅javascript parseInt()一章节。

(4).setTimeout()方法可以参阅setTimeout()一章节。

(5).new运算符的作用可以参阅js new运算符一章节。

js实现的元素抖动效果代码实例

回复

我来回复
  • 暂无回复内容