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 setTimeout(function(){$("#container").slideUp();},30000); //毫秒单位,显示30s后消失 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代码
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>
原文:http://www.cnblogs.com/winterIce/archive/2011/09/14/2175389.html