【原】也做一个滚动广告(向上滚动,无框架)
JS代码:
代码
1 //---------------------------scrollbar(纵向,向上)效果 start-----------------------------------
2 /*默认容器结构:
3 *<div>
4 <ul>
5 <li>内容1</li>
6 <li>内容2</li>
7 </ul>
8 </div>
9 */
10 var ScrollBar = {
11 _barBarObj: null,
12 _barListObj: null,
13 _barDelay: 3000,
14 _barTimer: null,
15 _barATimer:null, //移动动画用
16 BarMinElement: 1, //子元素大于这个数目,才会有动画
17 BarRowHeight: 30, //每行高度,需要根据实际情况设置
18 //初始化
19 Init: function(argBarObj, argListObj, argDelay, argContentArray, argMinElement) {
20 this._barBarObj = argBarObj; //必须指定,滚动条容器
21 this._barListObj = argListObj || this._barBarObj.getElementsByTagName("ul")[0]; //默认里面的第一个dl对象
22 this._barDelay = argDelay || 3000; //字幕停留时间(默认停留2秒)
23 if (argContentArray != undefined) //字幕内容(数组形式)
24 ScrollBar.SetContent(argContentArray);
25 this.BarMinElement = argMinElement || 1; //小于等于最小元素数的时候不作动画效果
26 },
27 //改变滚动内容
28 SetContent: function(argContentArray) {
29 var tempHtml = "";
30 for (var i = 0; i < argContentArray.length; i++) {
31 tempHtml += "<li>" + argContentArray[i] + "</li>";
32 }
33 this._barListObj.innerHTML = tempHtml;
34 },
35 //开始滚动
36 StartScroll: function() {
37 if (null == this._barTimer) {
38 this._barTimer = setInterval(this.m_DoScrollAction, this._barDelay);
39 }
40 },
41 //停止滚动
42 StopScroll: function() {
43 if (null != this._barTimer)
44 clearInterval(this._barTimer);
45 },
46 //动作(外部无需调用)
47 m_DoScrollAction: function() {
48 var ddArray = ScrollBar._barListObj.getElementsByTagName("li");
49 var bNeedScroll = ddArray.length > ScrollBar.BarMinElement; //大于最小元素数目的时候才有必要滚动,否则不动
50 if (bNeedScroll) {
51 ScrollBar.m_QuickMove();
52 var tempNode = ScrollBar._barListObj.removeChild(ddArray[0]);
53 ScrollBar._barListObj.appendChild(tempNode);
54 ScrollBar.m_ResetListObjMargin();
55 }
56 },
57 //100毫秒内做完动画
58 m_QuickMove: function() {
59 ScrollBar._barATimer=setInterval(function(){
60 var lstObj = ScrollBar._barListObj;
61 var oldMarginTop=parseInt(lstObj.style.marginTop);
62 if(oldMarginTop+ScrollBar.BarRowHeight>0)
63 lstObj.style.marginTop = (oldMarginTop-2)+ "px";
64 else{
65 if(null!=ScrollBar._barATimer)
66 clearInterval(ScrollBar._barATimer);
67 }
68 },50);
69 },
70 m_ResetListObjMargin: function() {
71 ScrollBar._barListObj.style.marginTop = "0px";
72 }
73 };
74 //---------------------------scrollbar(纵向)效果 end-----------------------------------
2 /*默认容器结构:
3 *<div>
4 <ul>
5 <li>内容1</li>
6 <li>内容2</li>
7 </ul>
8 </div>
9 */
10 var ScrollBar = {
11 _barBarObj: null,
12 _barListObj: null,
13 _barDelay: 3000,
14 _barTimer: null,
15 _barATimer:null, //移动动画用
16 BarMinElement: 1, //子元素大于这个数目,才会有动画
17 BarRowHeight: 30, //每行高度,需要根据实际情况设置
18 //初始化
19 Init: function(argBarObj, argListObj, argDelay, argContentArray, argMinElement) {
20 this._barBarObj = argBarObj; //必须指定,滚动条容器
21 this._barListObj = argListObj || this._barBarObj.getElementsByTagName("ul")[0]; //默认里面的第一个dl对象
22 this._barDelay = argDelay || 3000; //字幕停留时间(默认停留2秒)
23 if (argContentArray != undefined) //字幕内容(数组形式)
24 ScrollBar.SetContent(argContentArray);
25 this.BarMinElement = argMinElement || 1; //小于等于最小元素数的时候不作动画效果
26 },
27 //改变滚动内容
28 SetContent: function(argContentArray) {
29 var tempHtml = "";
30 for (var i = 0; i < argContentArray.length; i++) {
31 tempHtml += "<li>" + argContentArray[i] + "</li>";
32 }
33 this._barListObj.innerHTML = tempHtml;
34 },
35 //开始滚动
36 StartScroll: function() {
37 if (null == this._barTimer) {
38 this._barTimer = setInterval(this.m_DoScrollAction, this._barDelay);
39 }
40 },
41 //停止滚动
42 StopScroll: function() {
43 if (null != this._barTimer)
44 clearInterval(this._barTimer);
45 },
46 //动作(外部无需调用)
47 m_DoScrollAction: function() {
48 var ddArray = ScrollBar._barListObj.getElementsByTagName("li");
49 var bNeedScroll = ddArray.length > ScrollBar.BarMinElement; //大于最小元素数目的时候才有必要滚动,否则不动
50 if (bNeedScroll) {
51 ScrollBar.m_QuickMove();
52 var tempNode = ScrollBar._barListObj.removeChild(ddArray[0]);
53 ScrollBar._barListObj.appendChild(tempNode);
54 ScrollBar.m_ResetListObjMargin();
55 }
56 },
57 //100毫秒内做完动画
58 m_QuickMove: function() {
59 ScrollBar._barATimer=setInterval(function(){
60 var lstObj = ScrollBar._barListObj;
61 var oldMarginTop=parseInt(lstObj.style.marginTop);
62 if(oldMarginTop+ScrollBar.BarRowHeight>0)
63 lstObj.style.marginTop = (oldMarginTop-2)+ "px";
64 else{
65 if(null!=ScrollBar._barATimer)
66 clearInterval(ScrollBar._barATimer);
67 }
68 },50);
69 },
70 m_ResetListObjMargin: function() {
71 ScrollBar._barListObj.style.marginTop = "0px";
72 }
73 };
74 //---------------------------scrollbar(纵向)效果 end-----------------------------------
HTML代码:
代码
1 <div id="srollItem" style="width:750px; height:90px; line-height:30px; padding:0px 10px; border:solid 1px blue; display:block; overflow:hidden; display:block; background:white;">
2 <ul style="padding:0px; margin:0px; list-style:none;">
3 </ul>
4 </div>
2 <ul style="padding:0px; margin:0px; list-style:none;">
3 </ul>
4 </div>
调用:
<script type="text/javascript">
ScrollBar.Init($("srollItem"));
//ScrollBar.BarMinElement = 4;
ScrollBar.SetContent(["从前有座山","山上有座庙","庙里有个老和尚和一个小和尚","老和尚对小和尚说:"]);
ScrollBar.StartScroll();
</script>