scroller.js
2.04 KB
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/**
* [上下滚动]
* @author: wsl(shuiling.wang@yoho.cn)
* @date: 2016/12/13
*/
// 类创建函数
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
};
}
};
var Scroller = Class.create();
function $(element) {
var i, length, elements;
if (arguments.length > 1) {
for (i = 0, length = arguments.length, elements = []; i < length; i++) {
elements.push($(arguments[i]));
}
return elements;
}
if (typeof element === 'string') {
return document.getElementById(element);
} else {
return element;
}
}
// 对象属性方法扩展
Function.prototype.bind = function(object) { // eslint-disable-line
var method = this;
return function() {
method.apply(object, arguments);
};
};
Scroller.prototype = {
// 第一个参数定义要滚动的区域,第二个参数定义每次滚动的高度
initialize: function(element, height, delay) {
this.element = $(element);
this.element.innerHTML += this.element.innerHTML;
this.height = height;
this.delay = delay * 1000;
this.maxHeight = this.element.scrollHeight / 2;
this.counter = 0;
this.scroll();
this.timer = '';
this.element.onmouseover = this.stop.bind(this);
this.element.onmouseout = function() {
this.timer = setTimeout(this.scroll.bind(this), 1000);
}.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.timer = setTimeout(this.scroll.bind(this), 10);
} else {
this.counter = 0;
this.timer = setTimeout(this.scroll.bind(this), this.delay);
}
},
stop: function() {
clearTimeout(this.timer);
}
};
module.exports = Scroller;