水平滚动字幕的jquery插件和原生代码

最新推荐文章于 2019-11-19 15:56:24 发布

huang100qi

最新推荐文章于 2019-11-19 15:56:24 发布

阅读量653

点赞数

水平滚动字幕的jquery插件和原生代码

滚动可以用标签<marquee>来实现，网上有些文章说marquee只有IE支持，其他的浏览器不支持。开始我还信以为真，后来亲手是一把，才知道这种说法是错误的。其他浏览器（chrome,opera,safari,firefox等）都是支持marquee的（绝知此事要躬行啊）。既然所有浏览器都兼容不应该就没问题了，但是仔细发现marquee实现的滚动效果太挫了，一卡一卡地滚，用户体验不好，果然被pm打回来，说要修改。查了很多javascript代码，发现很多都是基于原生的javascript实现的，于是自己写了个符合自己需求的jquery插件，方便以后使用。

水平滚动字幕的jquery插件

 
     
   
<!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=gb2312" />
<title>滚动文字jquery插件</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(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");
                      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，也要用匿名函数封装，这里调试了n久
                      
                      $container.bind("mouseover",function()
                     {
                            clearInterval(time);
                     });
                      $container.bind("mouseout",function()
                     {
                            time = setInterval(function(){This.move($container,$content,speed);},20);
                     });
                      
                      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"});
                      }
                      else
                      {
                           $content.css({left:parseInt(container_width) + "px"});
                      }
         }
  });
})(jQuery);
//插件的调用$("#yourId").roll({speed:#yourSpeed});
$(document).ready(
    function(){
   $("#container").roll({speed:2});
    }
);
</script>
<style type="text/css">
#container{
   background:#CCCCCC;
   position:relative;
   overflow:hidden;  /*这个东西折腾了很久才弄出来*/
   width:550px;
   height:25px;
   line-height:25px;
   margin:100px;
}

#content{
   position:absolute;
   left:0;
   top:0;
   white-space:nowrap;   /*重要，不然文字显示效果不好*/
}
</style>

</head>

<body>
<div id="container">
   <div id="content">This is a roll word test,created by Baidu FE.</div>
</div>
</body>
</html> 
     
   

原生的javascript代码

 
     
   
<!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=gb2312" />
<title>滚动文字</title>
<style type="text/css">
#container{
   background:#CCCCCC;
   position:relative;
   overflow:hidden;
   width:550px;
   height:25px;
   line-height:25px;
   margin:100px;
}

#content{
   position:absolute;
   left:0;
   top:0;
   white-space:nowrap;
}
</style>
</head>

<body>
<div id="container">
   <div id="content">This is a roll word test,created by Baidu FE.</div>
</div>
<script type="text/javascript">
if(!window.rollWord){
    var rollWord = {
          container:document.getElementById("container"),
          content:document.getElementById("content"),
          _containerWidth:1,
          _contentWidth:1,
          _speed:1,
          setSpeed:function(opt){
                var This = this;
                This._speed = opt;
          },
          setContainerWidth:function(){
                var This = this;
                This._containerWidth = This.container.offsetWidth;
          },
          setContentWidth:function(){
                var This = this;
                This._contentWidth = This.content.offsetWidth;
          },
          roll:function(){
                var This = this;
                This.content.style.left = parseInt(This._containerWidth) + "px";
                var time = setInterval(function(){This.move()},20);
                This.container.onmouseover = function(){
                     clearInterval(time);
                };
                This.container.onmouseout = function(){
                     time = setInterval(function(){This.move()},20);
                };
          },
          move:function(){
                var This = this;
                if(parseInt(This.content.style.left)+This._contentWidth > 0)
                {
                     This.content.style.left = parseInt(This.content.style.left)-This._speed + "px";
                }
                 else
                 {
                     This.content.style.left = parseInt(This._containerWidth) + "px";
                 }                 
          },
          init:function(opt){
               var This = this;
               var speed = opt.speed || 1;
               This.setSpeed(speed);
               This.setContainerWidth();
               This.setContentWidth();
               This.roll();
          }
     }
}
     rollWord.init({speed:2});
</script>
</body>
</html>

huang100qi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
水平滚动字幕的jquery插件和原生代码

水平滚动字幕的jquery插件和原生代码滚动可以用标签来实现，网上有些文章说marquee只有IE支持，其他的浏览器不支持。开始我还信以为真，后来亲手是一把，才知道这种说法是错误的。其他浏览器（chrome,opera,safari,firefox等）都是支持marquee的（绝知此事要躬行啊）。既然所有浏览器都兼容不应该就没问题了，但是仔细发现marquee实现的滚动效果太挫了，一卡一卡
复制链接

扫一扫