使用marguee.js创建上下滚动广告栏

原来一个网站都是用各种“插件”拼凑出来的。公司都用marquee.js显示上下翻滚的动态广告条。就几个字，每隔3秒滚到下一跳，5条文字广告轮流滚动，一个月一条广告要收3000块，太挣钱了！

用法：

下载marquee.js (http://hot.xmfish.com/js/marquee.js)

或者直接复制：

/******************************************************************* 通用不间断滚动JS封装类* 深蓝蝴蝶* 使用方法*   new Marquee("marquee",0,1,760,52,50,5000,3000)*   new Marquee("marquee",0,1,760,104,50,5000,3000,52)**  参数说明:*   参数1 marquee 容器ID*   参数2 0  向上滚动(0-向上 1-向下 2-向左 3-向右)*   参数3 1  滚动的步长(数值越大,滚动越快)*   参数4 760  容器可视宽度*   参数5 52  容器可视高度*   参数6 50  定时器(数值越小,滚动的速度越快 1000=1秒,建议不小于20)*   参数7 5000  间歇停顿延迟时间(0为不停顿,1000=1秒)*   参数8 3000  开始时的等待时间(0为不等待,1000=1秒)*   参数9 (52)  间歇滚动间距(可选,该数值与延迟均为0则为鼠标悬停控制)* 　使用建议:*  1、建议直接赋予容器的显示区域的宽度和高度，*   如(<div id="marquee" style="width:760px;height:52px;">......</div>)*  2、建议为容器添加样式overflow=auto，*   如(<div id="marquee" style="width:760px;height:52px;overflow:auto;">......</div>)*  3、为了更准确的获取滚动区域的宽度和高度，请尽可能将各滚动单位直接赋予正确宽高度*  4、对于TABLE标记的横向滚动，需要对TABLE添加样式display=inline，*   如(<div id="marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">......</table></div>)*  5、对于翻屏滚动或间歇滚动，要注意各滚动单位间的间距，*   同时需要对容器的可视高度和可视宽度做好准确的设置，对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整*  6、对于LI自动换行的问题暂时没有更好的解决办法，建议将其转换成表格(TABLE)的形式来达到同等的效果** 注意：仅用div的时候需要用<nobr>来包括div*******************************************************************/var Marquee=function(){this.ID=document.getElementById(arguments[0]);this.Direction=arguments[1];this.Step=arguments[2];this.BakStep=arguments[2];this.Width=arguments[3];this.HalfWidth=Math.round(arguments[3]/2);this.Height=arguments[4];this.Timer=arguments[5];this.DelayTime=arguments[6];this.WaitTime=arguments[7];if(arguments[8] || arguments[8]==0){this.ScrollStep=arguments[8];}else{this.ScrollStep=this.Direction>1?this.Width:this.Height;}this.Correct=0;this.CTL=0;this.StartID=0;this.Stop=0;this.MouseOver=0;this.ID.style.overflow="hidden";this.ID.style.overflowX="hidden";this.ID.style.overflowY="hidden";this.ID.noWrap=true;this.ID.style.width=this.Width+"px";this.ID.style.height=this.Height+"px";this.ClientScroll=this.Direction>1?parseInt(this.ID.scrollWidth):parseInt(this.ID.scrollHeight);this.ID.innerHTML+=this.ID.innerHTML;this.IsNotOpera=(navigator.userAgent.toLowerCase().indexOf("opera")==-1);if(arguments.length>=8){this.Start(this,this.Timer,this.DelayTime,this.WaitTime);}}Marquee.prototype.Start=function(msobj,timer,delaytime,waittime){msobj.StartID=function(){msobj.Scroll();};msobj.Continue=function(){if(msobj.MouseOver==1){setTimeout(msobj.Continue,delaytime);}else{clearInterval(msobj.TimerID);msobj.CTL=0;msobj.Stop=0;msobj.TimerID=setInterval(msobj.StartID,timer);}};msobj.Pause=function(){msobj.Stop=1;clearInterval(msobj.TimerID);setTimeout(msobj.Continue,delaytime);};msobj.Begin=function(){msobj.ID.onmousemove=function(evt){if(msobj.ScrollStep==0 && msobj.Direction>1){var event=null;if(window.event){event=window.event;if(msobj.IsNotOpera){msobj.EventLeft=event.srcElement.id==msobj.ID.id?parseInt(event.offsetX)-parseInt(msobj.ID.scrollLeft):parseInt(event.srcElement.offsetLeft)-parseInt(msobj.ID.scrollLeft)+parseInt(event.offsetX);}else{msobj.ScrollStep=null;return;}}else{event=evt;msobj.EventLeft=parseInt(event.layerX)-parseInt(msobj.ID.scrollLeft);}msobj.Direction=msobj.EventLeft>msobj.HalfWidth?3:2;msobj.AbsCenter=Math.abs(msobj.HalfWidth-msobj.EventLeft);msobj.Step=Math.round(msobj.AbsCenter*(msobj.BakStep*2)/msobj.HalfWidth);}};msobj.ID.onmouseover=function(){if(msobj.ScrollStep==0){return;}msobj.MouseOver=1;clearInterval(msobj.TimerID);};msobj.ID.onmouseout=function(){if(msobj.ScrollStep==0){if(msobj.Step==0){msobj.Step=1;}return;}msobj.MouseOver=0;if(msobj.Stop==0){clearInterval(msobj.TimerID);msobj.TimerID=setInterval(msobj.StartID,timer);}};msobj.TimerID=setInterval(msobj.StartID,timer);};setTimeout(msobj.Begin,waittime);}Marquee.prototype.Scroll=function(){if(this.Correct==0 && this.CTL>this.ClientScroll){this.ClientScroll=(this.Direction>1)?Math.round(parseInt(this.ID.scrollWidth)/2):Math.round(parseInt(this.ID.scrollHeight)/2);this.Correct=1;}switch(this.Direction){case 0:{this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0){this.ID.scrollTop+=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;}else{if(this.ID.scrollTop>=this.ClientScroll){this.ID.scrollTop-=this.ClientScroll;}this.ID.scrollTop+=this.Step;}break;}case 1:{this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0){this.ID.scrollTop-=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;}else{if(this.ID.scrollTop<=0){this.ID.scrollTop+=this.ClientScroll;}this.ID.scrollTop-=this.Step;}break;}case 2:{this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0){this.ID.scrollLeft+=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;}else{if(this.ID.scrollLeft>=this.ClientScroll){this.ID.scrollLeft-=this.ClientScroll;}this.ID.scrollLeft+=this.Step;}break;}case 3:{this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0){this.ID.scrollLeft-=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;}else{if(this.ID.scrollLeft<=0){this.ID.scrollLeft+=this.ClientScroll;}this.ID.scrollLeft-=this.Step;}break;}this.ID.scrollTop+="px";this.ID.scrollLeft+="px";}}

将上面的js代码保存为marquee.js，并且在同一个文件夹下建立test.html：

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"><html><head><style type="text/css">body {font: 12px/1.6em tahoma, verdana;color: #000000; }div {font: 12px/1.6em tahoma, verdana;color: #000000; }li {font: 12px/1.6em tahoma, verdana;color: #000000; }td {font: 12px/1.6em tahoma, verdana;color: #000000; }p {font: 12px/1.6em tahoma, verdana;color: #000000;}input {font: 12px/1.6em tahoma, verdana;color: #000000;}a {color: #333333;text-decoration: none;}a:hover {text-decoration: underline;}ul {padding-bottom: 0px;list-style-type: none;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;}h1 {padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;}h2 {padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;}h3 {padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;}h4 {padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;}.box {margin: 0px auto;width: 960px;}.t7 {margin-top: 7px;}.text {border-bottom: #8097af 1px solid;border-left: #8097af 1px solid;width: 65px;border-top: #8097af 1px solid;border-right: #8097af 1px solid;}a.log {color: #0064b0;text-decoration: underline}.index_baoliao {border-bottom: #6bbaee 2px solid;margin: 0px 10px;}.index_baoliao h1 {float: right;}.index_baoliao span {width: 280px;float: left;}.index_baoliao span a {line-height: 29px;color: #1e50a2;}.marquee2 {line-height: 29px;width: 278px;height: 29px;}.marquee2 li {line-height: 29px !important;width: 278px;float: left;height: 29px;overflow: hidden;}</style><script type="text/javascript" src="./marquee.js"></script></head><body><div class="index_baoliao"><span><div id="marqueediv2" class="marquee2"><ul><!-- marquee start --><li><a title="一波未平一波又起！c家不仅把郑mm告上了法庭，把热心助人的会员告上了法庭，连小鱼网也被告上了法庭" href="http://bbs.xmfish.com/read-htm-tid-7003694.html" target="_blank">一波未平一波又起！c家不仅把郑mm告上了法庭，把热心助人的会员告上了法庭，连小鱼网也被告上了法庭</a></li><li><a title="关系户撞死人，不怕 我上面有人。。。" href="http://bbs.xmfish.com/read-htm-tid-6994698.html" target="_blank">关系户撞死人，不怕 我上面有人。。。</a></li><li><a title="据说，这是闽南男人和闽南女人大半辈子的写照。" href="http://bbs.xmfish.com/read-htm-tid-6983317.html" target="_blank">据说，这是闽南男人和闽南女人大半辈子的写照。</a></li><li><a title="今天5点多坐厦狮专线的时候车上一个小孩一直哭，怀疑被拐" href="http://bbs.xmfish.com/read-htm-tid-6988634.html" target="_blank">今天5点多坐厦狮专线的时候车上一个小孩一直哭，怀疑被拐</a></li><li><a title="昨天精虫上脑去剁饼子，结果亏了300。。。" href="http://bbs.xmfish.com/read-htm-tid-6989777.html" target="_blank">昨天精虫上脑去剁饼子，结果亏了300。。。</a></li><!-- marquee end --></ul></div></span><h1><a href="http://bao.xmfish.com/" target="_blank"><img border="0" alt="我要爆料" src="http://bao.xmfish.com/images/special/baoliao/baoliao.gif" /></a></h1><div style="clear:both"></div><script type="text/javascript">new Marquee("marqueediv2",0,1,278,29,10,3000,500);</script></div></body></html>

注意：下面这段js代码一定要放到body里（只要不是在id="marqueediv2" 前面都可以）。平常我们js都放到head里，这个不行，如果放到head里会无法执行翻滚。因为：marquee.js在声明一个新的对象：id为marqueediv2时，找不到id为marqueediv2，html本来就不严谨，所以它也不报错。所以，要放到id=XXX后。

<script type="text/javascript">new Marquee("marqueediv2",0,1,278,29,10,3000,500);</script>