javascript 緩慢出現的廣告層效果

antzone發表於2017-04-07
JavaScript

本章節分享一段程式碼例項，它實現了廣告層從右側緩慢出現的效果。

程式碼算是比較長，其實比較簡單，這裡就不進行分析了，如果有任何問題可以更貼留言。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#abc{
  border:1px solid #003399;
  position:absolute;
  height:150px;
  width:220px;
  right:-100%;
}
#abc #tit{
  background-color:#0066FF;
  position:relative;
  height:100%;
  width:20px;
  color:#FFFFFF;
  text-align:center;
  float:left;
}
#kong{
  position:absolute;
  width:100%;
  top:100px;
  overflow:hidden;
  top:100px;
  right:0px;
}
.right{
  float:right;
  width:190px;
  padding:5px;
}
</style>
<script>
var $=function(d){
  return document.getElementById(d)
};
var CLS={
  create:function(){
    return function(){
      this.$ADD=function(fn){CLS.add(this,fn)};
      this.init.apply(this, arguments);
    }
  },
  add:function (obj,fn){
    fn.apply(obj,arguments);
  },
  enterFrame:function (){
    this.onEnterFrame=function (){};
    this.$PLAY = function (g){
      this.enterFrameP = this.enterFrameP || 10;
      this.CLStimeIndex = CLS.ontimes.length;
      CLS.ontimes.push(this);
      window.clearTimeout(this.enterFrameTimeout);
      window.clearInterval(this.enterFrameInterval);
      if(g)
            this.enterFrameTimeout = window.setTimeout('CLS.ontimes['+this.CLStimeIndex+'].enterFrameInterval=window.setInterval("CLS.ontimes['+this.CLStimeIndex+'].onEnterFrame()",'+this.enterFrameP+')',parseInt(g*1000));
      else 
            this.enterFrameInterval = window.setInterval("CLS.ontimes["+this.CLStimeIndex+"].onEnterFrame()",this.enterFrameP);
    }
    this.$STOP = function (){
      window.clearInterval(this.enterFrameInterval);
    }
    this.$SET = function (p){
      this.enterFrameP = p;
    }
  },
  ontimes:new Array()
};
CLS.Marquee = CLS.create();
CLS.Marquee.prototype = {
  init:function (button,box,speed){
    this.box = $(box);
    this.tit = $(button)
    this.kong = $("kong");
    this.onOpen = true;
    this.show = false;
    this.time = 0;
    this.speed = speed;
    this.kong.style.height = this.box.offsetHeight +"px";
    this.Maxw = this.box.offsetWidth-this.tit.offsetWidth;
    this.box.style.right = -this.box.offsetWidth + "px";
    this.boxTop = this.kong.offsetTop;
    var _t = this;
    this.tit.onclick = function (){
      this.show = true;
      if(_t.onOpen){
        _t.onEnterFrame = _t.close;
        _t.onOpen = false;
      }
          else{
        _t.onEnterFrame = _t.open;
        _t.onOpen = true;
      }
      _t.$PLAY();
    };
    this.$ADD(CLS.enterFrame);
    this.onEnterFrame = this.open;
    this.$PLAY();
  },
  open:function(){
    this.tit.innerHTML = "-";
    var _r = parseInt(this.box.style.right);
    var _b = (0 - _r)/30;
    this.box.style.right = (_r + _b) +"px";
    this.kong.style.top = (document.documentElement.scrollTop + this.boxTop) +"px";
    if(_b==0 && !this.show){
      this.time +=10;
      if(this.time>=this.speed*1000){
        this.show = true;
        this.onOpen = false;
        this.$STOP();
        this.onEnterFrame = this.close;
        this.$PLAY(); 
      }
    } 
  },
  close:function (){
    this.tit.innerHTML = "+";
    var _r = parseInt(this.box.style.right);
    var _b = (-this.Maxw - _r)/5;
    this.box.style.right = Math.round(_r + _b) +"px";
    this.kong.style.top = (document.documentElement.scrollTop + this.boxTop) +"px";
  }
};
window.onload = function (){
  setTimeout(function(){new CLS.Marquee("tit","abc",10)},3000);
};
</script>
</head>
<body style="margin:0px;">
<div id="kong">
<div id="abc">
<div id="tit">-</div>
<div class="right">
<a href="/">螞蟻部落</a></div>
</div>
</div>
右側廣告3秒後彈出
</body>
</html>

相關文章