利用jquery编写文字水平的滚动字幕（跑马灯）

最新推荐文章于 2023-02-28 17:56:48 发布

原创最新推荐文章于 2023-02-28 17:56:48 发布 · 3.8k 阅读

7 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

17 篇文章

订阅专栏

介绍一款基于jQuery的滚动字幕插件，具备速度调节、定时消失、鼠标交互暂停等功能，适用于网页动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

序言

给大家推荐一个用jQuery编写的滚动字幕程序，有的人也叫跑马灯程序。这个程序相对于传统跑马灯程序增加了文字滚动速度调节、显示一段时间后消失、鼠标移入停止、鼠标移出继续滚动等功能，同时修改了刷新界面时会先闪现一下字幕内容的bug。本程序基于jquery-3.4.0.min.js插件版本，废话不多说，直接上代码。

HTML:

 <div id="container_small_tip">
 	<div id="content_small_tip"></div>
 </div>

JS:

$("#content_small_tip")[0].innerHTML = "北京第三区交通委提醒您：道路千万条，安全第一条，行车不规范，亲人两行泪。";
    (function ($) {
         $.fn.extend({
             roll: function (options) {
                 var defaults = {
                     speed: 1
                 };
                 var options = $.extend(defaults, options);
                 var speed = (document.all) ? options.speed : Math.max(1, options.speed - 1);
                 if ($(this) == null) return;
                 var $container = $(this);
                 var $content = $("#content_small_tip");
                 var init_left = $container.width();
                 $content.css({ left: parseInt(init_left) + "px" });
                 var This = this;
                 var time = setInterval(function () { This.move($container, $content, speed); }, 20); //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装

                 $container.bind("mouseover", function () {
                     clearInterval(time);
                 });
                 $container.bind("mouseout", function () {
                     time = setInterval(function () { This.move($container, $content, speed); }, 20);
                 });
                 // setTimeout(function () { $("#container").slideUp(); }, 30000);  //毫秒单位，显示30s后消失
                 return this;
             },
             move: function ($container, $content, speed) {
                 var container_width = $container.width();
                 var content_width = $content.width();
                 if (parseInt($content.css("left")) + content_width > 0) {
                     $content.css({ left: parseInt($content.css("left")) - speed + "px" });
                     $content.css({color:"#02A0E9"})//改变字体颜色
                 }
                 else {
                     $content.css({ left: parseInt(container_width) + "px" });
                     $content.css({color:"#02A0E9"})//改变字体颜色
                 }
             }
         });
     })(jQuery);
     //插件的调用$("#yourId").roll({speed:#yourSpeed});
     $(document).ready(
         function () {
             $("#container_small_tip").roll({ speed: 2 });
         }
     );

CSS：

#container_small_tip{
   background:#EBEEF7;
    position:relative;
    overflow:hidden;  
    width:1240px;
    height:36px;
    line-height:36px;
    /* margin:100px; */
}

#content_small_tip{
    position:absolute;
    left:0;
    top:0;
    white-space:nowrap;
    color: #EBEEF7;/*与背景颜色相同，先隐藏，需要时再变颜色*/
}