1.Html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
|
2.CSS代码：
1
2
3
4
5
6
7
8
|
}
body { font:12px Verdana, Geneva, sans-serif; color:#666; text-align:center;}
#container { width:180px; margin:30px auto; text-align:left; padding:10px; border:1px solid #ccc; height:250px; position:relative; overflow:hidden;}
.noticeList { width:180px; list-style:inside; position:absolute; top:270px; left:10px;}
.noticeList li { padding-bottom:5px;}
.noticeList li a { color:#606060; text-decoration:none;}
.noticeList li a:hover { color:#09F;}
|
3.JS代码：（备了部分注释，不懂的可以留言询问。）
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
|
{
function ScrollAction(listObj, listElem, speed, isSeries) { //listObj为需要滚动的列表， speed为滚动速度
var pos, top, aniTop, height;
var id = ''; //记录setInterval的标记id
pos = listObj.position();
top = pos.top; //列表的top
aniTop = top; //记录当前运动时的top
height = listObj.height(); //列表的高度
var scrollUp = function() {
aniTop--;
if(!isSeries) { //isSeries变量控制是否连续滚动，false不连续，true连续
if(aniTop == -height) { //不连续，滚动玩重新滚动
listObj.css({'top': top});
aniTop = top;
};
} else {
if(aniTop == -listObj.children().eq(0).height()) { //连续滚动
var firstItem = '< ' + listElem +'>' + listObj.children().eq(0).html() + '< /' + listElem +'>';
listObj.children().eq(0).remove();
listObj.append(firstItem);
aniTop = 4;
};
};
listObj.css({'top': aniTop + 'px'});
};
var hover = function(id) {
listObj.hover(function() {
clearInterval(id);
}, function() {
id = setInterval(scrollUp, speed);
});
};
this.start = function() {
id = setInterval(scrollUp, speed);
hover(id);
};
};
var sa = new ScrollAction($('.noticeList'), 'li', 30, true);
sa.start();
});
|
使用时别忘了引入jQuery库哦，也希望大家给我提出意见，或功能扩充等要求。