实现效果 
从下往上进行轮播 关键技术 setTimeout bind apply scrollTop scrollHeight 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
//工厂模式
var Class = {
create:function(){
return function(){
this.init.apply(this,arguments);
}
}
};
Marquee = Class.create();
Marquee.prototype={
init:function(element,height){
this.element = document.getElementById(element);
this.height = height;
this.element.innerHTML += this.element.innerHTML;
this.maxHeight = this.element.scrollHeight/2;
this.time = null;//定时器这里我们使用setTimeout来进行实现
this.counter = 0;//动画计数器
this.scroll();//开始滚动
this.element.onmouseout = function(){
this.time = setTimeout(this.scroll.bind(this),1000);
}.bind(this);
this.element.onmouseover= this.stop.bind(this);
},
scroll:function(){
//滚动区域主要函数
if(this.element.scrollTop < this.maxHeight){
this.element.scrollTop++;
this.counter++;
}else{
this.element.scrollTop = 0;
this.counter = 0;
}
//这里我们进行
if(this.counter<this.height){
this.time = setTimeout(this.scroll.bind(this),20);
}else{
this.counter = 0;
this.time = setTimeout(this.scroll.bind(this),3000);
}
},
stop:function(){
//清除计时器
clearTimeout(this.time);
}
};
var marquee = new Marquee('m-announce','24');
|
wechat
alipay
