Marquee替代 -- 无间滚动
Marquee标签一直以来都被W3C排斥,而且,屁股后老带着段空白,这个是最让人恼火的...
JS替代Marquee网上也有不少例子,可基本上都是单个实例,不支持多个,修改起来又麻烦,而且各个浏览器的兼容性也不是很好。
所以,俺就做了个支持多个实例,兼容性好的替代品(其实是一年前做的...),虽然没什么技术含量,可是简单实用,只要简简单单的四步就能实现Marquee替代无间滚动效果。
首先放出在线演示,下载地址:
http://www.niceui.cn/Project/Marquee/
http://www.niceui.cn/Project/Marquee/Marquee.rar
下面先来看下具体用法:
I. 引入Marquee.js:
<script language="javascript" src="http://www.niceui.cn/Project/Marquee/Marquee.js"></script>
II. 用个容器将你要滚动的内容包起来:
- <div id="MyMarqueeX">
- 这里放内容
- </div>
III. 限制容器的高宽,并设置overflow:hidden
- <style type="text/css">
- <!--
- #MyMarqueeX {width: 1003px; height: 150px; overflow: hidden;}
- -->
- </style>
IV. 生成Marquee实例
- <script language="javascript" type="text/javascript">
- var Demo1 = new Marquee({
- obj : 'MyMarqueeX'
- });
- </script>
一个代替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>
- <style type="text/css">
- <!--
- #MyMarqueeX {width: 98%; height: 100px; overflow: hidden; margin: 0 auto 0 auto}
- #MyMarqueeX img {width: 105px; height: 80px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
- #MyMarqueeY {width: 125px; height: 420px; overflow: hidden}
- #MyMarqueeY img {width: 105px; height: 80px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
- -->
- </style>
- <link href="http://www.niceui.cn/Project/Common/Demo.css" rel="stylesheet" type="text/css" charset="utf-8" />
- <script type="text/javascript" src="http://www.niceui.cn/Project/Marquee/Marquee.js" charset="utf-8"></script>
- </head>
- <body>
- <div class="case">
- <div class="title"><a href="#" class="r">Top</a>About Mudoo</div>
- 我的博客 <a href="http://hi.baidu.com/mt20/" class="light">http://hi.baidu.com/mt20/</a>
- </div>
- <div class="case">
- <div class="title"><a href="#" class="r">Top</a>Marquee 调用方法</div>
- <div class="b">new Marquee({obj, name, mode, interval, autoStart, hovering});</div>
- <ul class="info gray">
- <li><span class="key">obj:</span><span class="type">Object</span>滚动对象 (*必须)</li& amp; gt;
- <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">interval:</span><span class="type">Number</span>滚动速度,越小速度越快 (可选,默认 10,1秒=1000)</li>
- <li><span class="key">speed:</span><span class="type">Number</span>滚动步长,越大数度越快 (可选,默认 1像素)</li>
- <li><span class="key">autoStart:</span><span class="type">Boolean</span>自动开始 (可选,默认True)& amp; lt;/li>
- <li><span class="key">hovering:</span><span class="type">Boolean</span>是否悬停 (可选,默认True)& amp; lt;/li>
- </ul>
- <br />
- 在线演示地址:<a href="http://www.niceui.cn/Project/Marquee/" class="light">http://www.niceui.cn/Project/Marquee/</a><br />
- 最新更新下载:<a href="http://www.niceui.cn/Project/Marquee/Marquee.rar" class="light">http://www.niceui.cn/Project/Marquee/Marquee.rar</a>
- </div>
- <div class="case">
- <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模 式 <a href="javascript: ;" οnclick="Demo1.speed=Math.abs(Demo1.speed);">向左</a>-<a href="javascript: ;" οnclick="Demo1.speed=-Math.abs(Demo1.speed);">向右</a>& nbsp;: <a href="javascript: ;" οnclick="Demo1.Stop();">停止</a>-<a href="javascript: ;" οnclick="Demo1.Start();">开始</a></div>
- <div id="MyMarqueeX">
- <table width="100%" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td><img src="http://www.niceui.cn/Project/Common/Images/1.gif" /></td>
- <td><img src="http://www.niceui.cn/Project/Common/Images/2.gif" /></td>
- <td><img src="http://www.niceui.cn/Project/Common/Images/3.gif" /></td>
- <td><img src="http://www.niceui.cn/Project/Common/Images/4.gif" /></td>
- <td><img src="http://www.niceui.cn/Project/Common/Images/5.gif" /></td>
- <td><img src="http://www.niceui.cn/Project/Common/Images/6.gif" /></td>
- <td><img src="http://www.niceui.cn/Project/Common/Images/7.gif" /></td>
- <td><img src="http://www.niceui.cn/Project/Common/Images/8.gif" /></td>
- <td><img src="http://www.niceui.cn/Project/Common/Images/9.gif" /></td>
- <td><img src="http://www.niceui.cn/Project/Common/Images/10.gif" /></td>
- </tr>
- </table>
- </div>
- </div>
- <div class="case">
- <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模 式 <a href="javascript: ;" οnclick="Demo2.speed=Math.abs(Demo2.speed);">向上</a>-<a href="javascript: ;" οnclick="Demo2.speed=-Math.abs(Demo2.speed);">向下</a>& nbsp;: <a href="javascript: ;" οnclick="Demo2.Stop();">停止</a>-<a href="javascript: ;" οnclick="Demo2.Start();">开始</a></div>
- <div id="MyMarqueeY">
- <img src="http://www.niceui.cn/Project/Common/Images/1.gif" /><br />
- <img src="http://www.niceui.cn/Project/Common/Images/2.gif" /><br />
- <img src="http://www.niceui.cn/Project/Common/Images/3.gif" /><br />
- <img src="http://www.niceui.cn/Project/Common/Images/4.gif" /><br />
- <img src="http://www.niceui.cn/Project/Common/Images/5.gif" /><br />
- <img src="http://www.niceui.cn/Project/Common/Images/6.gif" /><br />
- <img src="http://www.niceui.cn/Project/Common/Images/7.gif" /><br />
- <img src="http://www.niceui.cn/Project/Common/Images/8.gif" /><br />
- <img src="http://www.niceui.cn/Project/Common/Images/9.gif" /><br />
- <img src="http://www.niceui.cn/Project/Common/Images/10.gif" /><br />
- </div>
- </div>
- <script language="javascript" type="text/javascript">
- //<!--
- /*********************************************
- - Marquee 演示
- *********************************************/
- var Demo1 = new Marquee({
- obj : 'MyMarqueeX'
- });
- var Demo2 = new Marquee({
- obj : 'MyMarqueeY',
- mode : 'y'
- });
- //-->
- </script>
- </body>
- </html>
from:http://hi.baidu.com/mt20/blog/item/b0c7274feec1dc3cafc3abbb.html