向上滚动的文字跑马灯，基于JQUERY，淡入淡出

发布时间：2018-08-17 22:42 所属栏目：121 来源：站长网

导读：一个特别的文字列表跑马灯特效，常见的文字滚动代码，基于JQUERY，有淡入淡出的效果，播放速度可控。控制范围，符合 jQuery 路径即可，可以设置需要显示的内容条目数，如果内容数目大于需要滚动的数目，开始滚动!开始滚动后，显示不完的内容会克隆.追加到

　　一个特别的文字列表‘跑马灯’特效，常见的文字滚动代码，基于JQUERY，有淡入淡出的效果，播放速度可控。控制范围，符合jQuery路径即可，可以设置需要显示的内容条目数，如果内容数目大于需要滚动的数目，开始滚动!开始滚动后，显示不完的内容会克隆.追加到最后隐藏起来。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery跑马灯</title> <script language="<b>Java</b>Script" src="/uploads/common/js/jquery-1.3.2.js"></script> </head> <body> <ul class="list_text odd_even" id="indexLinks"> <li><a href="#" target="_blank">111111111</a></li> <li><a href="#" target="_blank">222222222</a></li> <li><a href="#" target="_blank">333333333</a></li> <li><a href="#" target="_blank">444444444</a></li> <li><a href="#" target="_blank">555555555</a></li> <li><a href="#" target="_blank">666666666</a></li> <li><a href="#" target="_blank">www.baidu.com</a></li> <li><a href="#" target="_blank">888888888</a></li> <li><a href="#" target="_blank">999999999</a></li> <li><a href="#" target="_blank">aaaaaaaaa</a></li> <li><a href="#" target="_blank">bbbbbbbbb</a></li> <li><a href="#" target="_blank">ccccccccc</a></li> <li><a href="#" target="_blank">ddddddddd</a></li> <li><a href="#" target="_blank">eeeeeeeee</a></li> <li><a href="#" target="_blank">fffffffff</a></li> <li><a href="#" target="_blank">ggggggggg</a></li> <li><a href="#" target="_blank">www.veryhuo.com</a></li> <li><a href="#" target="_blank">iiiiiiiii</a></li> <li><a href="#" target="_blank">jjjjjjjjj</a></li> <li><a href="#" target="_blank">kkkkkkkkk</a></li> <li><a href="#" target="_blank">lllllllll</a></li> <li><a href="#" target="_blank">mmmmmmmmm</a></li> <li><a href="#" target="_blank">nnnnnnnnn</a></li> <li><a href="#" target="_blank">ooooooooo</a></li> <li><a href="#" target="_blank">ppppppppp</a></li> <li><a href="#" target="_blank">www.163.com</a></li> <li><a href="#" target="_blank">rrrrrrrrr</a></li> <li><a href="#" target="_blank">sssssssss</a></li> <li><a href="#" target="_blank">ttttttttt</a></li> </ul> <script language="javascript"> $(document).ready(function(){ //播放速度 var speed = 2000; //控制范围，符合jQuery路径即可 var block = '#indexLinks li'; //需要显示的内容条目数 var eq = 8; var h = 0; if($(block).length > eq){//如果内容数目大于需要滚动的数目，开始滚动！ //隐藏除了第一个的其它所有节点 $(block).slice(eq).css('display','none'); //播放开始 h = setInterval('scrollContent("'+block+'",'+eq+',2)',speed); $('#siteBulletin').mouseout(function(){ h = setInterval('scrollContent("'+block+'",'+eq+',2)',speed); }); $('#siteBulletin').mouseover(function(){ clearInterval(h); }); } }); function scrollContent(block,eq,type){ //获取第节点 var firstNode = $(block); //动画效果 switch(type){ case 1: animation_out = {height:'hide'}; animation_in = {height:'show'}; break; case 2: animation_out = {opacity:'hide'}; animation_in = {opacity:'show'}; break; case 3: animation_out = {height:'hide',opacity:'hide'}; animation_in = {height:'show',opacity:'show'}; break; default:''; } //开始动画 firstNode.eq(0).animate(animation_out,1000,function(){//隐藏 //克隆.追加到最后.隐藏 $(this).clone().appendTo($(this).parent()).css('display','none'); //显示第二个节点内容 firstNode.eq(eq).removeAttr('style').animate(animation_in,1000); //删除第一个节点内容 $(this).remove(); }); } </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）