文字水平滾動(跑馬燈)——方法1
阿新 • • 發佈：2019-01-22
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:113 };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 returnthis; 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