利⽤jquery编写⽂字⽔平的滚动字幕（跑马灯）
序⾔
给⼤家推荐⼀个⽤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(){ ve($container, $content, speed);},20);//setInterval会改变this指向，即使加了This=this，也要⽤匿名函数封装
$container.bind("mouseover",function(){
clearInterval(time);
});
$container.bind("mouseout",function(){
time =setInterval(function(){ ve($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"})//改变字体颜⾊
}
}
});
html滚动字幕})(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;/*与背景颜⾊相同，先隐藏，需要时再变颜⾊*/
}
解决页⾯刷新时闪现⼀下字幕内容的bug，我是将⼀开始的字体颜⾊和背景⾊设置为相同颜⾊，这样就起到了隐藏的效果（如果没有背景，就直接将字体设置为⽩⾊），当滚动时再通过jQuery调⽤CSS属性改变字体颜⾊，这样每次刷新就不会闪现⼀下内容了。
效果
进⼊时效果
居中时效果
移出时效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。