仿新浪微博
无缝：
1 $(function(){ 2 //多行应用@Mr.Think 3 var _wrap=$('ul.mulitline');//定义滚动区域 4 var _interval=3000;//定义滚动间隙时间 5 var _moving;//需要清除的动画 6 _wrap.hover(function(){ 7 clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动 8 },function(){ 9 _moving=setInterval(function(){ 10 var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的 11 var _h=_field.height();//取得每次滚动高度 12 _field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行 13 _field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动 14 }) 15 },_interval)//滚动间隔时间取决于_interval 16 }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动 17 });
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=utf-8" /> 5 <title>jquery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动</title> 6 <meta name="description" content="jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动，一款实用的jQuery图文滚动插件，图片文字列表间歇上下滚动效果。" /> 7 <style type="text/css" media="screen"> 8 *{margin:0;padding:0;list-style-type:none;} 9 a,img{border:0;} 10 body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} 11 .demo{width:500px;margin:30px auto 0 auto;} 12 .demo h2{font-size:16px;color:#333;height:52px;line-height:24px;} 13 /* sidebar */ 14 #sidebar{color:#AFB0B1;background:#0D171A;float:left;margin:0 0 24px;padding:15px 10px 10px;width:500px;} 15 #sidebar li{height:90px;overflow:hidden;} 16 #sidebar li h5{color:#A5A9AB;font-size:1em;margin-bottom:0.5em;} 17 #sidebar li h5 a{color:#fff;text-decoration:none;} 18 #sidebar li img{float:left;border:solid 3px #fff;margin-right:8px;display:inline;} 19 #sidebar li .info{color:#B1B1B1;font-size:1em;} 20 #sidebar .spyWrapper{height:100%;overflow:hidden;position:relative;} 21 </style> 22 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 23 <script type="text/javascript"> 24 (function($){ 25 $.fn.simpleSpy = function (limit, interval){ 26 limit = limit || 4; 27 interval = interval || 4000; 28 29 return this.each(function(){ 30 // 1. 设置 31 // 捕获所有的列表项的缓存 32 // 列表限制li元素 33 var $list = $(this), 34 items = [], // 未初始化 35 currentItem = limit, 36 total = 0, // 初始化以后 37 height = $list.find('> li:first').height(); 38 39 // 捕获缓存 40 $list.find('> li').each(function(){ 41 items.push('<li>' + $(this).html() + '</li>'); 42 }); 43 44 total = items.length; 45 46 $list.wrap('<div class="spyWrapper" />').parent().css({height : height * limit}); 47 48 $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove(); 49 50 // 2. 效果 51 function spy(){ 52 // 插入一个新的项目，透明度和高度为零 53 var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list); 54 55 // 褪色的最后一个事件 56 $list.find('> li:last').animate({ opacity : 0}, 1000, function(){ 57 // 增加新的第一个项目的高度 58 $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000); 59 $(this).remove(); 60 }); 61 62 currentItem++; 63 if(currentItem >= total){ 64 currentItem = 0; 65 } 66 setTimeout(spy, interval) 67 } 68 69 spy(); 70 }); 71 }; 72 })(jQuery); 73 </script> 74 75 <script type="text/javascript"> 76 $(document).ready(function(){ 77 $('ul.spy').simpleSpy(); 78 }); 79 </script> 80 81 </head> 82 <body> 83 84 <div class="demo"> 85 86 <h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2> 87 88 <div id="sidebar"> 89 <ul class="spy"> 90 <li> 91 <a href="http://www.17sucai.com/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a> 92 <h5><a href="http://www.17sucai.com/" title="View round">round</a></h5> 93 <p class="info">Nov 29th 2008 by neue</p> 94 </li> 95 <li> 96 <a href="http://www.17sucai.com/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a> 97 <h5><a href="http://www.17sucai.com/" title="View reflet">reflet</a></h5> 98 <p class="info">Nov 29th 2008 by neue</p> 99 </li> 100 <li> 101 <a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a> 102 <h5><a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5> 103 <p class="info">Nov 29th 2008 by neue</p> 104 </li> 105 <li> 106 <a href="http://www.17sucai.com/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a> 107 <h5><a href="http://www.17sucai.com/" title="View Untitled">Untitled</a></h5> 108 <p class="info">Nov 29th 2008 by mike1052</p> 109 </li> 110 <li> 111 <a href="http://www.17sucai.com/" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a> 112 <h5><a href="http://www.17sucai.com/" title="View My Tutorial's Library">My Tutorial's Library</a></h5> 113 <p class="info">Nov 29th 2008 by FrancescoOnAir</p> 114 </li> 115 <li> 116 <a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a> 117 <h5><a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5> 118 <p class="info">Nov 29th 2008 by John Doe</p> 119 </li> 120 <li> 121 <a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a> 122 <h5><a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5> 123 <p class="info">Nov 29th 2008 by John Doe</p> 124 </li> 125 <li> 126 <a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a> 127 <h5><a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5> 128 <p class="info">Nov 29th 2008 by John Doe</p> 129 </li> 130 <li> 131 <a href="http://www.17sucai.com/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a> 132 <h5><a href="http://www.17sucai.com/" title="View Values of n Blog">Values of n Blog</a></h5> 133 <p class="info">Nov 29th 2008 by John Doe</p> 134 </li> 135 </ul> 136 </div> 137 138 </div> 139 140 </body> 141 </html>
