Marquee替代 -- 无间滚动

最新推荐文章于 2024-04-07 19:25:41 发布

limfungsuen

最新推荐文章于 2024-04-07 19:25:41 发布

阅读量1k

点赞数

分类专栏： Java Script 文章标签： border class function float javascript div

Java Script 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Marquee标签一直以来都被W3C排斥，而且，屁股后老带着段空白，这个是最让人恼火的...
JS替代Marquee网上也有不少例子，可基本上都是单个实例，不支持多个，修改起来又麻烦，而且各个浏览器的兼容性也不是很好。
所以，俺就做了个支持多个实例，兼容性好的替代品（其实是一年前做的...），虽然没什么技术含量，可是简单实用，只要简简单单的四步就能实现Marquee替代无间滚动效果。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Marquee 替代 -- 无间滚动</title> <mce:style type="text/css"></mce:style><mce:style type="text/css" mce_bogus="1"></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">* {padding: 0; margin: 0} body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px} input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB} textarea {padding: 5px; line-height: 20px} p {margin: 1em 0} ul {} li {height: 1%; overflow: hidden; list-style-type: none} a {color: #666666; text-decoration: none} a:hover {color: #333333} .r {float: right} .l {float: left} .b {font-weight: bold} .gray {color: #666666; margin-top: 8px} .light {color:#FF6600; margin: 0 5px} .case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden} .title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA} .call {display:block;} .key {display: block; width: 8em; float: left} .type {display: block; width: 6em; float: left} .info {padding-left: 2em} .demo {margin-bottom: 2em}</style> <mce:style type="text/css"></mce:style><mce:style type="text/css" mce_bogus="1"></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">#MyMarqueeX {width: 98%; height: 150px; overflow: hidden; margin: 0 auto 0 auto} #MyMarqueeX img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px} #MyMarqueeY {width: 205px; height: 420px; overflow: hidden;} #MyMarqueeY img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}</style> <mce:script language="javascript" type="text/javascript"></mce:script> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <div class="case"> <div class="title"><a href="#" mce_href="#" class="r">Top</a>Marquee 调用方法</div> <div class="b">new Marquee({obj, name, mode, speed, autoStart, movePause});</div> <ul class="info gray"> <li><span class="key">obj：</span><span class="type">Object</span>滚动对象 (*必须)</li> <li><span class="key">name：</span><span class="type">String</span>实例名 (*可选，默认随机)</li> <li><span class="key">mode：</span><span class="type">String</span>滚动模式(x=水平, y=垂直) (*可选,默认为x)</li> <li><span class="key">speed：</span><span class="type">Number</span>滚动速度，越小速度越快 (*可选，默认10)</li> <li><span class="key">autoStart：</span><span class="type">Boolean</span>自动开始 (*可选，默认True)</li> <li><span class="key">movePause：</span><span class="type">Boolean</span>鼠标经过是否暂停 (*可选，默认True)</li> </ul> </div> <div class="case"> <div class="title"><a href="#" mce_href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式</div> <div id="MyMarqueeX"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="http://www.fjhongyi.com/img/31.jpg" mce_src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/32.jpg" mce_src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/33.jpg" mce_src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/34.jpg" mce_src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/35.jpg" mce_src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /></td> <td><img src="http://www.fjhongyi.com/img/36.jpg" mce_src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /></td> </tr> </table> </div> </div> <div class="case"> <div class="title"><a href="#" mce_href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式</div> <div id="MyMarqueeY"> <img src="http://www.fjhongyi.com/img/31.jpg" mce_src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/32.jpg" mce_src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/33.jpg" mce_src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/34.jpg" mce_src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/35.jpg" mce_src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /><br /> <img src="http://www.fjhongyi.com/img/36.jpg" mce_src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /><br /> </div> </div> <mce:script language="javascript" type="text/javascript"></mce:script> </body> </html>