【原】也做一个滚动广告（向上滚动，无框架）

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-----------------------------------

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>

调用：

posted @ 2010-08-12 13:12 Jimixu 阅读(307) 评论(0) 编辑收藏举报

Jimixu

【原】也做一个滚动广告（向上滚动，无框架）

公告