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

来源：互联网发布：js获取微信用户openid 编辑：程序博客网时间：2024/05/19 10:39

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

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

水平滚动字幕的jquery插件

 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=gb2312" /> 5 <title>滚动文字jquery插件</title> 6 <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 7 <script type="text/javascript"> 8  (function($) {   9       $.fn.extend({        10           roll: function(options) { 11                        var defaults = {12                             speed:1           13                        };14                        var options = $.extend(defaults, options); 15                        var speed=(document.all) ? options.speed : Math.max(1,options.speed-1);16                        if ($(this) == null) return ; 17                        var $container = $(this);18                        var $content = $("#content");19                        var init_left = $container.width();20                        $content.css({left:parseInt(init_left) + "px"});21                        var This = this;22                        var time = setInterval(function(){This.move($container,$content,speed);},20); //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装，这里调试了n久23                        24                        $container.bind("mouseover",function()25                       {26                              clearInterval(time);27                       });28                        $container.bind("mouseout",function()29                       {30                              time = setInterval(function(){This.move($container,$content,speed);},20);31                       });32                        33                        return this;    34          },35           move:function($container,$content,speed){36                        var container_width = $container.width();37                        var content_width = $content.width();38                        if (parseInt($content.css("left")) + content_width > 0)39                        {40                             $content.css({left:parseInt($content.css("left")) - speed + "px"});41                        }42                        else43                        {44                             $content.css({left:parseInt(container_width) + "px"});45                        }46           }47    });48 })(jQuery);49 //插件的调用$("#yourId").roll({speed:#yourSpeed});50 $(document).ready(51      function(){52     $("#container").roll({speed:2});53      }54 );55 </script>56 <style type="text/css">57 #container{58     background:#CCCCCC;59     position:relative;60     overflow:hidden;  /*这个东西折腾了很久才弄出来*/61     width:550px;62     height:25px;63     line-height:25px;64     margin:100px;65 }66 67 #content{68     position:absolute;69     left:0;70     top:0;71     white-space:nowrap;   /*重要，不然文字显示效果不好*/72 }73 </style>74 75 </head>76 77 <body>78 <div id="container">79     <div id="content">This is a roll word test,created by Baidu FE.</div>80 </div>81 </body>82 </html>

原生的javascript代码

 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=gb2312" /> 5 <title>滚动文字</title> 6 <style type="text/css"> 7 #container{ 8     background:#CCCCCC; 9     position:relative;10     overflow:hidden;11     width:550px;12     height:25px;13     line-height:25px;14     margin:100px;15 }16 17 #content{18     position:absolute;19     left:0;20     top:0;21     white-space:nowrap;22 }23 </style>24 </head>25 26 <body>27 <div id="container">28     <div id="content">This is a roll word test,created by Baidu FE.</div>29 </div>30 <script type="text/javascript">31 if(!window.rollWord){32      var rollWord = {33            container:document.getElementById("container"),34            content:document.getElementById("content"),35            _containerWidth:1,36            _contentWidth:1,37            _speed:1,38            setSpeed:function(opt){39                  var This = this;40                  This._speed = opt;41            },42            setContainerWidth:function(){43                  var This = this;44                  This._containerWidth = This.container.offsetWidth;45            },46            setContentWidth:function(){47                  var This = this;48                  This._contentWidth = This.content.offsetWidth;49            },50            roll:function(){51                  var This = this;52                  This.content.style.left = parseInt(This._containerWidth) + "px";53                  var time = setInterval(function(){This.move()},20);54                  This.container.onmouseover = function(){55                       clearInterval(time);56                  };57                  This.container.onmouseout = function(){58                       time = setInterval(function(){This.move()},20);59                  };60            },61            move:function(){62                  var This = this;63                  if(parseInt(This.content.style.left)+This._contentWidth > 0)64                  {65                       This.content.style.left = parseInt(This.content.style.left)-This._speed + "px";66                  }67                   else68                   {69                       This.content.style.left = parseInt(This._containerWidth) + "px";70                   }                 71            },72            init:function(opt){73                 var This = this;74                 var speed = opt.speed || 1;75                 This.setSpeed(speed);76                 This.setContainerWidth();77                 This.setContentWidth();78                 This.roll();79            }80       }81 }82       rollWord.init({speed:2});83 </script>84 </body>85 </html>

0 0