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

来源：互联网发布：算法工程师做什么编辑：程序博客网时间：2024/05/03 04:24

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

水平滚动字幕的jquery插件

View Code

 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                        else
43                        {
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代码

View Code

 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                   else
68                   {
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>

代码的功能只是实现水平滚动，垂直滚动有待更进。

1 0