JS 滚动学习[转]

来源：互联网发布：js右键后弹出菜单编辑：程序博客网时间：2024/06/15 14:30

今天发现自己套的原来的滚动效果在火狐上九出现了很大的问题，随在网上找了找相关资料，发现时CMS的bug。我只是维护了，所以顺便在网上学习了别人用JS写好的滚动效果，纯粹的拿来主义了。(均为他人成果，就是自己留着想以后用的，也方便大家来使用。)

Html 部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>K2046.ScrollText</title> <mce:script language="javascript" type="text/javascript" src="ScrollText.js" mce_src="ScrollText.js"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .title{height:28px;width:150px;line-height:28px;text-align:center;border-bottom:solid 1px #888888;background-color:#EEEEEE;} .fleft{float:left;margin-left:20px;font-size:12px;} .listscroll{border:solid 1px #888888;width:150px;text-align:left;} #listdown,#listmarquee,#listcontent{height:179px;width:150px;overflow:hidden;} .listpro{height:59px;width:130px;line-height:20px;overflow:hidden;border-bottom:dashed 1px #AAAAAA;margin-left:10px;} .remark{margin-top:10px;line-height:18px;} </style> <mce:script language="javascript" type="text/javascript"></mce:script></head><body><div class="fleft"><div class="listscroll"> <div class="title">最新产品</div> <div id="listcontent"> <div class="listpro"> 名称:最新商品1<br /> 描述:最新商品1到货了.<br /> 价格:￥999.99 </div> <div class="listpro"> 名称:最新商品2<br /> 描述:最新商品2到货了.<br /> 价格:￥999.99 </div> <div class="listpro"> 名称:最新商品3<br /> 描述:最新商品3到货了.<br /> 价格:￥999.99 </div> <div class="listpro"> 名称:最新商品4<br /> 描述:最新商品4到货了.<br /> 价格:￥999.99 </div> </div></div><div class="remark">向上滚动<br />var scrollup = new ScrollText("listcontent");<br />scrollup.LineHeight = 60;<br />scrollup.Amount = 4;<br />scrollup.Start();<br /></div></div><div class="fleft"><div class="listscroll"> <div class="title">最新产品</div> <div id="listmarquee"> <table id="ec_table" border="0" cellspacing="1" cellpadding="1" class="tableRegion" width="100%" ><thead><tr style="padding: 0px;" mce_style="padding: 0px;" ></tr><tr><td class="tableHeader" >序号</td><td class="tableHeader" >纳税人识别号</td><td class="tableHeader" >纳税人名称</td><td class="tableHeader" >购货方代码</td><td class="tableHeader" >购货方名称</td><td class="tableHeader" >发票代码</td><td class="tableHeader" >发票号码</td><td class="tableHeader" >开票日期</td><td class="tableHeader" >原发票代码</td><td class="tableHeader" >原发票号码</td><td class="tableHeader" >开票合计金额</td><td class="tableHeader" >开票类型</td><td class="tableHeader" >主管税务官员</td><td class="tableHeader" >主管税务机构</td><td class="tableHeader" >操作</td></tr></thead><tbody class="tableBody" ><tr class="odd" onmouseover="this.className='highlight'" onmouseout="this.className='odd'" ><td style="text-align:center" mce_style="text-align:center" >1</td><td style="text-align:center" mce_style="text-align:center" >460001640820102</td><td>贵夫人服装店</td><td>460001640820102</td><td>aa</td><td style="text-align:center" mce_style="text-align:center" >146001010203</td><td style="text-align:center" mce_style="text-align:center" >10042601</td><td style="text-align:center" mce_style="text-align:center" >2011-03-17</td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:right" mce_style="text-align:right" >122.00</td><td style="text-align:center" mce_style="text-align:center" >正数发票</td><td>通什陈列</td><td>五指山冲山所</td><td style="text-align:center" mce_style="text-align:center" ><a href="#" mce_href="#"><img title="查看详细信息" alt="查看详细信息" src="/cdjn_wlkpweb/images/table/docview.gif" border="0" onclick="javascript:fnview('217161');" /></a></td></tr><tr class="even" onmouseover="this.className='highlight'" onmouseout="this.className='even'" ><td style="text-align:center" mce_style="text-align:center" >2</td><td style="text-align:center" mce_style="text-align:center" >460001640820102</td><td>贵夫人服装店</td><td>460001640820102</td><td>aa</td><td style="text-align:center" mce_style="text-align:center" >146001010203</td><td style="text-align:center" mce_style="text-align:center" >10042601</td><td style="text-align:center" mce_style="text-align:center" >2011-03-17</td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:right" mce_style="text-align:right" >122.00</td><td style="text-align:center" mce_style="text-align:center" >正数发票</td><td>通什陈列</td><td>五指山冲山所</td><td style="text-align:center" mce_style="text-align:center" ><a href="#" mce_href="#"><img title="查看详细信息" alt="查看详细信息" src="/cdjn_wlkpweb/images/table/docview.gif" border="0" onclick="javascript:fnview('217160');" /></a></td></tr><tr class="odd" onmouseover="this.className='highlight'" onmouseout="this.className='odd'" ><td style="text-align:center" mce_style="text-align:center" >3</td><td style="text-align:center" mce_style="text-align:center" >460022610921123</td><td>鸿基锯木厂</td><td>11</td><td>11</td><td style="text-align:center" mce_style="text-align:center" >146001011201</td><td style="text-align:center" mce_style="text-align:center" >26617215</td><td style="text-align:center" mce_style="text-align:center" >2011-03-17</td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:right" mce_style="text-align:right" >121.00</td><td style="text-align:center" mce_style="text-align:center" >正数发票</td><td>文昌邢益良</td><td>文昌市文城税务所</td><td style="text-align:center" mce_style="text-align:center" ><a href="#" mce_href="#"><img title="查看详细信息" alt="查看详细信息" src="/cdjn_wlkpweb/images/table/docview.gif" border="0" onclick="javascript:fnview('217159');" /></a></td></tr><tr class="even" onmouseover="this.className='highlight'" onmouseout="this.className='even'" ><td style="text-align:center" mce_style="text-align:center" >4</td><td style="text-align:center" mce_style="text-align:center" >460022610921123</td><td>鸿基锯木厂</td><td>11</td><td>1111</td><td style="text-align:center" mce_style="text-align:center" >146001011201</td><td style="text-align:center" mce_style="text-align:center" >26617214</td><td style="text-align:center" mce_style="text-align:center" >2011-03-17</td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:right" mce_style="text-align:right" >121.00</td><td style="text-align:center" mce_style="text-align:center" >正数废票</td><td>文昌邢益良</td><td>文昌市文城税务所</td><td style="text-align:center" mce_style="text-align:center" ><a href="#" mce_href="#"><img title="查看详细信息" alt="查看详细信息" src="/cdjn_wlkpweb/images/table/docview.gif" border="0" onclick="javascript:fnview('217158');" /></a></td></tr><tr class="odd" onmouseover="this.className='highlight'" onmouseout="this.className='odd'" ><td style="text-align:center" mce_style="text-align:center" >5</td><td style="text-align:center" mce_style="text-align:center" >460022610921123</td><td>鸿基锯木厂</td><td>111</td><td>11</td><td style="text-align:center" mce_style="text-align:center" >146001011201</td><td style="text-align:center" mce_style="text-align:center" >26617213</td><td style="text-align:center" mce_style="text-align:center" >2011-03-17</td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:right" mce_style="text-align:right" >121.00</td><td style="text-align:center" mce_style="text-align:center" >正数废票</td><td>文昌邢益良</td><td>文昌市文城税务所</td><td style="text-align:center" mce_style="text-align:center" ><a href="#" mce_href="#"><img title="查看详细信息" alt="查看详细信息" src="/cdjn_wlkpweb/images/table/docview.gif" border="0" onclick="javascript:fnview('217157');" /></a></td></tr><tr class="even" onmouseover="this.className='highlight'" onmouseout="this.className='even'" ><td style="text-align:center" mce_style="text-align:center" >6</td><td style="text-align:center" mce_style="text-align:center" >460022610921123</td><td>鸿基锯木厂</td><td>11</td><td>11</td><td style="text-align:center" mce_style="text-align:center" >146001011201</td><td style="text-align:center" mce_style="text-align:center" >26617212</td><td style="text-align:center" mce_style="text-align:center" >2011-03-17</td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:right" mce_style="text-align:right" >121.00</td><td style="text-align:center" mce_style="text-align:center" >正数发票</td><td>文昌邢益良</td><td>文昌市文城税务所</td><td style="text-align:center" mce_style="text-align:center" ><a href="#" mce_href="#"><img title="查看详细信息" alt="查看详细信息" src="/cdjn_wlkpweb/images/table/docview.gif" border="0" onclick="javascript:fnview('217156');" /></a></td></tr><tr class="odd" onmouseover="this.className='highlight'" onmouseout="this.className='odd'" ><td style="text-align:center" mce_style="text-align:center" >7</td><td style="text-align:center" mce_style="text-align:center" >460022610921123</td><td>鸿基锯木厂</td><td>11</td><td>11</td><td style="text-align:center" mce_style="text-align:center" >146001011201</td><td style="text-align:center" mce_style="text-align:center" >26617211</td><td style="text-align:center" mce_style="text-align:center" >2011-03-17</td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:right" mce_style="text-align:right" >121.00</td><td style="text-align:center" mce_style="text-align:center" >正数发票</td><td>文昌邢益良</td><td>文昌市文城税务所</td><td style="text-align:center" mce_style="text-align:center" ><a href="#" mce_href="#"><img title="查看详细信息" alt="查看详细信息" src="/cdjn_wlkpweb/images/table/docview.gif" border="0" onclick="javascript:fnview('217155');" /></a></td></tr><tr class="even" onmouseover="this.className='highlight'" onmouseout="this.className='even'" ><td style="text-align:center" mce_style="text-align:center" >8</td><td style="text-align:center" mce_style="text-align:center" >460022610921123</td><td>鸿基锯木厂</td><td>11</td><td>11</td><td style="text-align:center" mce_style="text-align:center" >146001011201</td><td style="text-align:center" mce_style="text-align:center" >26617210</td><td style="text-align:center" mce_style="text-align:center" >2011-03-17</td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:right" mce_style="text-align:right" >121.00</td><td style="text-align:center" mce_style="text-align:center" >正数发票</td><td>文昌邢益良</td><td>文昌市文城税务所</td><td style="text-align:center" mce_style="text-align:center" ><a href="#" mce_href="#"><img title="查看详细信息" alt="查看详细信息" src="/cdjn_wlkpweb/images/table/docview.gif" border="0" onclick="javascript:fnview('217154');" /></a></td></tr><tr class="odd" onmouseover="this.className='highlight'" onmouseout="this.className='odd'" ><td style="text-align:center" mce_style="text-align:center" >9</td><td style="text-align:center" mce_style="text-align:center" >460022610921123</td><td>鸿基锯木厂</td><td>qw</td><td>qw</td><td style="text-align:center" mce_style="text-align:center" >146001011201</td><td style="text-align:center" mce_style="text-align:center" >26617209</td><td style="text-align:center" mce_style="text-align:center" >2011-03-17</td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:right" mce_style="text-align:right" >121.00</td><td style="text-align:center" mce_style="text-align:center" >正数发票</td><td>文昌邢益良</td><td>文昌市文城税务所</td><td style="text-align:center" mce_style="text-align:center" ><a href="#" mce_href="#"><img title="查看详细信息" alt="查看详细信息" src="/cdjn_wlkpweb/images/table/docview.gif" border="0" onclick="javascript:fnview('217153');" /></a></td></tr><tr class="even" onmouseover="this.className='highlight'" onmouseout="this.className='even'" ><td style="text-align:center" mce_style="text-align:center" >10</td><td style="text-align:center" mce_style="text-align:center" >460022610921123</td><td>鸿基锯木厂</td><td>qw</td><td>qw</td><td style="text-align:center" mce_style="text-align:center" >146001011201</td><td style="text-align:center" mce_style="text-align:center" >26617209</td><td style="text-align:center" mce_style="text-align:center" >2011-03-17</td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:center" mce_style="text-align:center" > </td><td style="text-align:right" mce_style="text-align:right" >121.00</td><td style="text-align:center" mce_style="text-align:center" >正数发票</td><td>文昌邢益良</td><td>文昌市文城税务所</td><td style="text-align:center" mce_style="text-align:center" ><a href="#" mce_href="#"><img title="查看详细信息" alt="查看详细信息" src="/cdjn_wlkpweb/images/table/docview.gif" border="0" onclick="javascript:fnview('217152');" /></a></td></tr></tbody></table> </div></div><div class="remark">也可以当成marquee<br />var marquee = new ScrollText("listmarquee");<br />marquee.LineHeight = 60;<br />marquee.Amount = 1;<br />marquee.Timeout = 30;<br />marquee.Delay = 30;<br />marquee.Start();<br /></div></div><div class="fleft"><div class="listscroll"> <div class="title">最新产品</div> <div id="listdown"> <div class="listpro"> <a href="http://www.baidu.com" mce_href="http://www.baidu.com" target="_blank"> 名称:最新商品1<br /> 描述:最新商品1到货了.<br /> 价格:￥999.99 </a> </div> <div class="listpro"> 名称:最新商品2<br /> 描述:最新商品2到货了.<br /> 价格:￥999.99 </div> <div class="listpro"> 名称:最新商品3<br /> 描述:最新商品3到货了.<br /> 价格:￥999.99 </div> <div class="listpro"> 名称:最新商品4<br /> 描述:最新商品4到货了.<br /> 价格:￥999.99 </div> </div></div><div class="remark">向下滚动<br />var scrolldown = new ScrollText("listcontent");<br />scrolldown.LineHeight = 60;<br />scrolldown.Amount = 4;<br />scrolldown.Direction = "down";<br />scrolldown.Start();<br /></div></div></body></html>

JS 部分: