右下角弹窗广告范例

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link rel="stylesheet" href="css/ad.css"/>
 7 </head>
 8 <body>
 9 <div id="adver">
10     <a href="javascript:adv.moveDown()">×</a>
11 </div>
12 <script>
13 var adv={
14     DISTANCE:0,      //弹出的距离
15     DURATION:2000,   //
16     STEPS:400,
17     interval:0,
18     step:0,
19     adv:null,       //对象
20     WAIT:3000,
21     moved:0,        //已经移动的步数
22     init:function(){
23         //获取广告区域对象id为adver的div
24         this.adv=document.getElementById('adver');
25         //获取adv计算后的height，保存在DISANCE属性中
26         this.DISTANCE=parseFloat(
27                 getComputedStyle(this.adv).height
28         );
29         //计算interval=DURATION/STEPS
30         this.interval=this.DURATION/this.STEPS;
31         //计算step=DISTANCE/STEPS
32         this.step=this.DISTANCE/this.STEPS;
33         debugger;
34         this.move(1);//调用this.moveUp()启动上移
35     },
36     move:function(dir,callback){//启动上移
37         //启动周期性定时器，传入任务函数moveUpStep,设置时间间隔为interval, 将序号保存在timer属性中
38         this.timer=setInterval(
39                 this.moveStep.bind(this,dir,callback),
40                 this.interval
41         );
42     },
43     moveStep:function(dir,callback){//上移一步
44         //获得adv计算后的bottom
45         var bottom=parseFloat(
46                 getComputedStyle(this.adv).bottom
47         );
48         //设置adv的bottom为bottom+this.step
49         this.adv.style.bottom=
50                 bottom+dir*this.step+"px";
51         this.moved++;
52         //如果moved等于STEPS
53         if(this.moved==this.STEPS){//动画结束
54             //停止定时器,清空timer, moved归0
55             clearInterval(this.timer);
56             this.timer=null;
57             this.moved=0;
58             if(callback){
59                 callback();
60             }
61         }
62     },
63     moveDown:function(){
64         //如果?
65         if(this.timer==null){//防动画叠加！
66             this.move(-1,function(){
67                 //启动一次性定时器: 传入任务函数move,提前绑定this和1, 设置等待时间为WAIT
68                 setTimeout(
69                         this.move.bind(this,1),this.WAIT   //这里是判断回调函数的依据
70                 );
71             }.bind(this));  //这里绑定一定要 绑定回callback
72         }
73     }
74 }
75 adv.init();//this->adv
76 </script>
77 </body>
78 </html>

#adver{
     200px;
    height:200px;
    position: fixed;
    bottom:-200px;
    right: 0px;
    background: #f0f0f0;
}
#adver>a{
    float: right;
}