水平滚动字幕的jquery插件和原生代码
滚动可以用标签<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>
代码的功能只是实现水平滚动，垂直滚动有待更进。
