Marquee替代 -- 无间滚动

最新推荐文章于 2023-01-11 14:54:59 发布
最新推荐文章于 2023-01-11 14:54:59 发布
阅读量7.6k 收藏 2
点赞数
分类专栏： ASP.NET 文章标签： javascript class stylesheet border xhtml 浏览器

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. 用个容器将你要滚动的内容包起来：

  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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  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="http://www.niceui.cn/Project/Common/Demo.css" rel="stylesheet" type="text/css" charset="utf-8" />
  15. <script type="text/javascript" src="http://www.niceui.cn/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="http://hi.baidu.com/mt20/" class="light">http://hi.baidu.com/mt20/</a>
  21. </div>
  22. <div class="case">
  23. <div class="title"><a href="#" class="r">Top</a>Marquee&nbsp;调用方法</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>滚动对象&nbsp;&nbsp;(*必须)</li& amp; gt;
  27.    <li><span class="key">name：</span><span class="type">String</span>实例名&nbsp;&nbsp;(可选，默认随机)< /li>
  28.    <li><span class="key">mode：</span><span class="type">String</span>滚动模式&nbsp;(x=水平, y=垂直)&nbsp;&nbsp;(可选，默认为x)</li>
  29.    <li><span class="key">interval：</span><span class="type">Number</span>滚动速度，越小速度越快&nbsp;&nbsp;(可选，默认 10，1秒=1000)</li>
  30.    <li><span class="key">speed：</span><span class="type">Number</span>滚动步长，越大数度越快&nbsp;&nbsp;(可选，默认 1像素)</li>
  31.    <li><span class="key">autoStart：</span><span class="type">Boolean</span>自动开始&nbsp;&nbsp;(可选，默认True)& amp; lt;/li>
  32.    <li><span class="key">hovering：</span><span class="type">Boolean</span>是否悬停&nbsp;&nbsp;(可选，默认True)& amp; lt;/li>
  33. </ul>
  34.     <br />
  35.     在线演示地址：<a href="http://www.niceui.cn/Project/Marquee/" class="light">http://www.niceui.cn/Project/Marquee/</a><br />
  36.     最新更新下载：<a href="http://www.niceui.cn/Project/Marquee/Marquee.rar" class="light">http://www.niceui.cn/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 演示&nbsp;-&nbsp;横向模 式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript: ;" οnclick="Demo1.speed=Math.abs(Demo1.speed);">向左</a>-<a href="javascript: ;" οnclick="Demo1.speed=-Math.abs(Demo1.speed);">向右</a>& nbsp;:&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="http://www.niceui.cn/Project/Common/Images/1.gif" /></td>
  44.      <td><img src="http://www.niceui.cn/Project/Common/Images/2.gif" /></td>
  45.      <td><img src="http://www.niceui.cn/Project/Common/Images/3.gif" /></td>
  46.      <td><img src="http://www.niceui.cn/Project/Common/Images/4.gif" /></td>
  47.      <td><img src="http://www.niceui.cn/Project/Common/Images/5.gif" /></td>
  48.      <td><img src="http://www.niceui.cn/Project/Common/Images/6.gif" /></td>
  49.      <td><img src="http://www.niceui.cn/Project/Common/Images/7.gif" /></td>
  50.      <td><img src="http://www.niceui.cn/Project/Common/Images/8.gif" /></td>
  51.      <td><img src="http://www.niceui.cn/Project/Common/Images/9.gif" /></td>
  52.      <td><img src="http://www.niceui.cn/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 演示&nbsp;-&nbsp;纵向模 式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript: ;" οnclick="Demo2.speed=Math.abs(Demo2.speed);">向上</a>-<a href="javascript: ;" οnclick="Demo2.speed=-Math.abs(Demo2.speed);">向下</a>& nbsp;:&nbsp;<a href="javascript: ;" οnclick="Demo2.Stop();">停止</a>-<a href="javascript: ;" οnclick="Demo2.Start();">开始</a></div>
  59. <div id="MyMarqueeY">
  60.    <img src="http://www.niceui.cn/Project/Common/Images/1.gif" /><br />
  61.    <img src="http://www.niceui.cn/Project/Common/Images/2.gif" /><br />
  62.    <img src="http://www.niceui.cn/Project/Common/Images/3.gif" /><br />
  63.    <img src="http://www.niceui.cn/Project/Common/Images/4.gif" /><br />
  64.    <img src="http://www.niceui.cn/Project/Common/Images/5.gif" /><br />
  65.    <img src="http://www.niceui.cn/Project/Common/Images/6.gif" /><br />
  66.    <img src="http://www.niceui.cn/Project/Common/Images/7.gif" /><br />
  67.    <img src="http://www.niceui.cn/Project/Common/Images/8.gif" /><br />
  68.    <img src="http://www.niceui.cn/Project/Common/Images/9.gif" /><br />
  69.    <img src="http://www.niceui.cn/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. });
  84. //-->
  85. </script>
  86. </body>
  87. </html>

 

from:http://hi.baidu.com/mt20/blog/item/b0c7274feec1dc3cafc3abbb.html


二笑
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
通用不间断滚动JS封装类，代替Marquee
05-12
内容索引:脚本资源,Ajax/JavaScript,图片滚动,Marquee　　一个可以代替Marquee走马灯特效的图片滚动封装类，它可控制图片做无缝循环滚动，可以在上下左右四个方面滚动，而且具备丰富自定义设置功能。它的特点： 　　横向、纵向滚动格式调整 (解决横向滚动换行的问题，无需特殊设置)， 彻底解决由于IE问题导致上下滚动页面留白的问题，它可以禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1)， 判断是否可以滚动 (若内容区域小于显示区域,则自动取消滚动)，跳过初始化错误 (避免引起其它滚动的停止)，默认值 (除容器ID必选外，其他参数均可
marquee跑马灯的替代方式
qq_38948398的博客
04-09 8424
随着H5的语义化，marquee标签逐渐被替代，后续可能浏览器不支持 这里介绍一下替代方式 实现位移的话，可以使用css3的transform配合过渡或者定时器 transition、transform、anmiation，使用css3的话，要考虑自己的应用场景，也就是滚动内容的宽度是固定的，因为@keyframe动画是在css中硬编码的，如果想用的话，这个就需要自己去找适合的插件了。 在...
marquee 标签建议弃用有没有替代标签
weixin_35755562的博客
01-11 997
Marquee 标签是一种 HTML 标签，它可以让文本在网页上滚动显示。Marquee 标签不推荐使用，因为它是一个已过时的标签，并且在许多浏览器上都不再被支持。 作为替代标签，建议使用 CSS 和 JavaScript 来实现文本滚动的效果。使用 CSS 的 animation 和 keyframes 可以让文本滚动，而使用 JavaScript 可以控制文本滚动的速度、方向等。这样不仅可以实...
用Javascript代替Marquee标签
aghedoc1749的博客
11-19 181
1.XHTML 代码：1<divid="demo">2<divid="indemo">3<divid="demo1">4<div>5<ahref="#"title=""><imgsrc="#"alt=""/></a>6<ahref="#...
代替marquee的滚动字幕效果js代码
anjiedun1870的博客
10-04 264
由于marquee已经被W3C标准抛弃，所以要在标准下实现滚动效果就只有使用JS代码了 HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ...
Marquee Plus-开源
04-24
这是wordpress和joomla的附加插件/模块，可帮助在您的wordpress博客或joomla网站中放置字幕。 有关这些插件和模块的更多信息，请访问http://www.etdsonline.com/technical/plugins-and-modules。
Marquee Anagrams-开源
04-27
曾经见过一个巨大的字幕，上面有另一条无用的信息吗？ 厌倦了在本地电影院上看到相同的电影名称吗？ 为什么不把事情弄混呢？ 该程序将帮助您为您当地的教堂招牌想出新的信息！
推荐通用文字图片JS不间断滚动封装类 代替Marquee
07-03
推荐通用文字图片JS不间断滚动封装类 代替Marquee
react-marquee-master
05-02
React字幕大师 创建滚动字幕的简单组件。... 使用打字稿进行构建以提供开箱即用的打字方式。 演示版 简单滚动： 扭转它，并加快它！ 还是水平的！...您可以将node_modules/react-marquee-master/dis
HTML标签marquee实现多种滚动效果(无需JS控制)
09-28
本文给大家介绍使用html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
Marquee Scroll通用不间断滚动JS封装类
11-23
Marquee Scroll通用不间断滚动JS封装类，各种方向滚动，调用十分简单！~
Vue开发组件之替代marquee标签，超出宽度文字横向滚动效果
热门推荐
主要领域：前端开发
11-25 3万+
marquee组件 <template> <div class="marquee-wrap"> <div class="scroll"> <p class="marquee">{{text}}</p> <p class="copy"></p> </div> ...
替代marquee,图片连续滚动,不留空白
E-Kunt的博客
06-20 2066
1.文字也是可以连续滚动的  2.文字也是可以连续滚动的  3.文字也是可以连续滚动的  4.文字也是可以连续滚动的  5.文字也是可以连续滚动的  6.文字也是可以连续滚动的        var speed=40 //调整滚动速度  m0.innerHTML=mtext.innerHTML  function Marquee(){  if(m0.offsetTo
js+div实现跑马灯效果，替代marquee实现无缝滚动
yehaifanxing的专栏
01-08 5967
CSS .pad_right { padding-left: 15px; } #scroll_div { height: 26px; line-height: 26px; overflow: hidden; white-space: nowr...
一个符合w3c标准的可以代替marquee标签实现翻滚效果的javascript 脚本
西涛offbye-移动全栈技术博客
05-02 4674
由于 最近网站需要使用文字翻滚的效果，因为marquee不是w3c标准标签，并且滚动时会出现一段时间的空白，因此使用下面的javascript脚本实现翻滚效果。 http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    demo6u
vue-marquee
最新发布
08-26
你可以在Vue项目中使用vue-marquee组件来创建各种各样的动态效果，比如创建滚动的新闻标题、广告横幅等。组件非常易于使用和定制，你可以根据自己的需要设置滚动速度、方向、内容等。如果你想了解更多关于vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值