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{
width: 200px;
height:200px;
position: fixed;
bottom:-200px;
right: 0px;
background: #f0f0f0;
}
#adver>a{
float: right;
}
