特效描述:文字连续 齿轮式滚动 图片展示。jquery文字连续齿轮式滚动图片展示特效代码下载
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2. HTML代码
<style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} a{color:#666;text-decoration:none;} a:hover{text-decoration:underline;} .demobox{width:660px;margin:0 auto;padding:40px 0 0 0;} /* do_ta */ .do_ta{border:1px solid #e4e4e4;font-size:12px;width:280px;float:left;margin:0 24px;display:inline;} .do_ta .ta_ta{height:28px;line-height:28px;background:#F5F5F5;border-bottom:solid 1px #ddd;padding:0 10px;font-weight:800;font-size:12px;} .do_ta .ta_tc{margin:10px;padding:0;line-height:20px;height:61px;overflow:hidden;} .do_ta .ta_tc li{border-bottom:1px dashed #e4e4e4;padding:0;margin:0;color:#666;height:60px;overflow:hidden;} .do_ta .ta_tc li p{line-height:30px;} .do_ta .ta_tc li a{color:#1a69de;} .do_ta .ta_tc li .time{color:#999;line-height:24px;} .do_ta .ta_tc li .time a{color:#ff6600;font-weight:800;} .do_ta .dota_d{text-align:center;padding:5px 0 15px 0;} .do_ta .dota_d a{color:#666;text-decoration:underline;} </style> <div class="demobox"> <div class="do_ta" id="dota1"> <h2 class="ta_ta">节奏感十足的齿轮式的文字滚动</h2> <ul class="ta_tc"> <li> <p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> <p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> </li> <li> <p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> <p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> </li> </ul> <ul class="ta_tc"> <li> <p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> <p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> </li> <li> <p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> <p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> </li> </ul> <ul class="ta_tc"> <li> <p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> <p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> </li> <li> <p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> <p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> </li> </ul> <ul class="ta_tc"> <li> <p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> <p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> </li> <li> <p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> <p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p> </li> </ul> <div class="dota_d"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></div> </div><!--do_ta end--> <div class="do_ta" id="dota2"> <p class="ta_ta">节奏感十足的齿轮式的图片滚动</p> <ul class="ta_tc"> <li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示" src="images/6.jpg" /></a></li> <li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="images/23.jpg" /></a></li> </ul> <ul class="ta_tc"> <li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡" src="images/324.jpg" /></a></li> <li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/as1.jpg" /></a></li> </ul> <ul class="ta_tc"> <li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示" src="images/6.jpg" /></a></li> <li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="images/23.jpg" /></a></li> </ul> <ul class="ta_tc"> <li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡" src="images/324.jpg" /></a></li> <li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/as1.jpg" /></a></li> </ul> <div class="dota_d"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></div> </div><!--do_ta end--> </div> <script type="text/javascript"> /*新发布和中标信息滚动*/ (function(){ var dota1=$("#dota1"), dota2=$("#dota2"), ta_tc1=dota1.find("ul"), ta_tc2=dota2.find("ul"); if(dota1.size()==0 ||dota2.size()==0 ){return false;} var scroll=function(uls){ //复制一次内部的li var li_h=uls.eq(0).find("li").outerHeight(); this.copy=function(){ uls.each(function(){ var lis=$(this).find("li"); $(this).append(lis.clone()); $(this).attr("li_s",lis.size()*2); $(this).attr("cur_li",lis.size()*2-1); }); } this.copy(); //移动到最下边的li this.toLast=function(){ uls.each(function(){ $(this).scrollTop(10000); }); } this.toLast(); var timer=null;//滚动的超时时间 var i=0; //开始滚动ul数组 function start(i) { var cur_ul=uls.eq(i); if(cur_ul){ cur_ul.animate({scrollTop:cur_ul.scrollTop()-li_h},function(){ var cur_li=parseInt(cur_ul.attr("cur_li")); var li_s=parseInt(cur_ul.attr("li_s")); cur_li--; if((li_s/2-1)==cur_li) { cur_ul.attr("cur_li",li_s-1); $(this).scrollTop(10000); }else{ cur_ul.attr("cur_li",cur_li); } start(++i); }); }; } timer=setInterval(function(){ start(i);},7000); } scroll(ta_tc1); scroll(ta_tc2); })(); </script>