向上转动的笔墨赛马灯，基于JQUERY，淡入淡出

发布时间：2018-08-18 02:53:14 所属栏目：编程来源：站长网

导读：一个出格的笔墨列表赛马灯殊效，常见的笔墨转动代码，基于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>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE