Marquee替代--⽆间滚动
Marquee替代 -- ⽆间滚动
Marquee标签⼀直以来都被W3C排斥，⽽且，屁股后⽼带着段空⽩，这个是最让⼈恼⽕的...
JS替代Marquee⽹上也有不少例⼦，可基本上都是单个实例，不⽀持多个，修改起来⼜⿇烦，⽽且各个浏览器的兼容性也不是很好。
所以，俺就做了个⽀持多个实例，兼容性好的替代品（其实是⼀年前做的...），虽然没什么技术含量，可是简单实⽤，只要简简单单的四步就能实现Marquee替代⽆间滚动效果。
⾸先放出在线演⽰，下载地址：
下⾯先来看下具体⽤法：
I. 引⼊Marquee.js：
<script language="javascript" src="www.niceui/Project/Marquee/Marquee.js"></script>
II. ⽤个容器将你要滚动的内容包起来：
1. <div id="MyMarqueeX">
2. 这⾥放内容
3. </div>
III. 限制容器的⾼宽，并设置overflow:hidden
1. <style type="text/css">
2. <!--
3. #MyMarqueeX {width: 1003px; height: 150px; overflow: hidden;}
4. -->
5. </style>
IV. ⽣成Marquee实例
1. <script language="javascript" type="text/javascript">
2. var Demo1 = new Marquee({
3. obj : 'MyMarqueeX'
4. });
5. </script>
⼀个代替Marquee的实例就这样诞⽣了...说明⼀下： 内容宽度若没有超出外围宽度是不滚动的...
下⾯给出完整演⽰：
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
2. <html xmlns="www.w
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Marquee 替代 -- ⽆间滚动</title>
6. <style type="text/css">
7. <!--
8. #MyMarqueeX {width: 98%; height: 100px; overflow: hidden; margin: 0 auto 0 auto}
9. #MyMarqueeX img {width: 105px; height: 80px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
10. #MyMarqueeY {width: 125px; height: 420px; overflow: hidden}
11. #MyMarqueeY img {width: 105px; height: 80px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
12. -->
13. </style>
14. <link href="www.niceui/Project/Common/Demo.css" rel="stylesheet" type="text/css" charset="utf-8" />
15. <script type="text/javascript" src="www.niceui/Project/Marquee/Marquee.js" charset="utf-8"></script>
16. </head>
17. <body>
18. <div class="case">
19. <div class="title"><a href="#" class="r">Top</a>About Mudoo</div>
20. 我的博客 <a href="hi.baidu/mt20/" class="light">hi.baidu/mt20/</a>
21. </div>
22. <div class="case">
23. <div class="title"><a href="#" class="r">Top</a>Marquee ；调⽤⽅法</div>
24. <div class="b">new Marquee({obj, name, mode, interval, autoStart, hovering});</div>
25. <ul class="info gray">
26. <li><span class="key">obj：</span><span class="type">Object</span>滚动对象 (*必须)</li& amp; gt;
27. <li><span class="key">name：</span><span class="type">String</span>实例名 (可选，默认随机)< /li>
28. <li><span class="key">mode：</span><span class="type">String</span>滚动模式 (x=⽔平, y=垂直)
(可选，默认为x)</li>
29. <li><span class="key">interval：</span><span class="type">Number</span>滚动速度，越⼩速度越快 (可
选，默认 10，1秒=1000)</li>
30. <li><span class="key">speed：</span><span class="type">Number</span>滚动步长，越⼤数度越快 (可选，
默认 1像素)</li>
31. <li><span class="key">autoStart：</span><span class="type">Boolean</span>⾃动开始 (可选，默认True)&
amp; lt;/li>
32. <li><span class="key">hovering：</span><span class="type">Boolean</span>是否悬停 (可选，默认True)&
amp; lt;/li>
33. </ul>
34. <br />
35. 在线演⽰地址：<a href="www.niceui/Project/Marquee/"
class="light">www.niceui/Project/Marquee/</a><br />
36. 最新更新下载：<a href="www.niceui/Project/Marquee/Marquee.rar"
class="light">www.niceui/Project/Marquee/Marquee.rar</a>
37. </div>
38. <div class="case">
39. <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> 40. <div id="MyMarqueeX">
41. <table width="100%" border="0" cellpadding="0" cellspacing="0">
42. <tr>
43. <td><img src="www.niceui/Project/Common/Images/1.gif" /></td>
44. <td><img src="www.niceui/Project/Common/Images/2.gif" /></td>
45. <td><img src="www.niceui/Project/Common/Images/3.gif" /></td>
46. <td><img src="www.niceui/Project/Common/Images/4.gif" /></td>
47. <td><img src="www.niceui/Project/Common/Images/5.gif" /></td>
48. <td><img src="www.niceui/Project/Common/Images/6.gif" /></td>
49. <td><img src="www.niceui/Project/Common/Images/7.gif" /></td>
50. <td><img src="www.niceui/Project/Common/Images/8.gif" /></td>
51. <td><img src="www.niceui/Project/Common/Images/9.gif" /></td>
52. <td><img src="www.niceui/Project/Common/Images/10.gif" /></td>
53. </tr>
54. </table>
55. </div>
56. </div>
57. <div class="case">
58. <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>
59. <div id="MyMarqueeY">
60. <img src="www.niceui/Project/Common/Images/1.gif" /><br />
61. <img src="www.niceui/Project/Common/Images/2.gif" /><br />
62. <img src="www.niceui/Project/Common/Images/3.gif" /><br />
63. <img src="www.niceui/Project/Common/Images/4.gif" /><br />
64. <img src="www.niceui/Project/Common/Images/5.gif" /><br />
65. <img src="www.niceui/Project/Common/Images/6.gif" /><br />
66. <img src="www.niceui/Project/Common/Images/7.gif" /><br />
67. <img src="www.niceui/Project/Common/Images/8.gif" /><br />
68. <img src="www.niceui/Project/Common/Images/9.gif" /><br />
69. <img src="www.niceui/Project/Common/Images/10.gif" /><br />
70. </div>
71. </div>
72. <script language="javascript" type="text/javascript">
73. //<!--
74. /*********************************************
75. - Marquee 演⽰
76. *********************************************/
77. var Demo1 = new Marquee({
78. obj : 'MyMarqueeX'
79. });
80. var Demo2 = new Marquee({
81. obj : 'MyMarqueeY',
82. mode : 'y'
83. });
marquee marquee
84. //-->
85. </script>
86. </body>
87. </html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论