6月22号的学习jquery(仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动)
今天的学习
<!DOCTYPE HTML"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css" media="screen">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}.demo{width:500px;margin:30px auto 0 auto;}.demo h2{font-size:16px;color:#333;height:52px;line-height:24px;}/* sidebar */#sidebar{color:#AFB0B1;background:#0D171A;float:left;margin:0 0 24px;padding:15px 10px 10px;width:300px;}#sidebar li{height:90px;overflow:hidden;}#sidebar li h5{color:#A5A9AB;font-size:1em;margin-bottom:0.5em;}#sidebar li h5 a{color:#fff;text-decoration:none;}#sidebar li img{float:left;border:solid 3px #fff;margin-right:8px;display:inline;}#sidebar li .info{color:#B1B1B1;font-size:1em;}#sidebar .spyWrapper{height:100%;overflow:hidden;position:relative;}</style><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">(function($){ $.fn.simpleSpy = function (limit, interval){limit = limit || 4;/*让div始终显示4个单位的高度*/interval = interval || 4000;/*控制每个动画效果的时间4000毫秒就是4秒 从最下面的图片消失到第5张图片的从上面显示出来一个动画2秒一共4秒的时间*/return this.each(function(){var $list = $(this),/*获得所有列表项目的缓存*/items = [], /*未初始化*/currentItem = limit,total = 0, /*初始化以后*/height = $list.find('> li:first').height();/*列表限制li元素*/$list.find('> li').each(function(){/*获得缓存*/items.push('<li>' + $(this).html() + '</li>');/*获得所有列表的li里面的缓存*/});total = items.length;/*始终显示在缓存里的li*/$list.wrap('<div />').parent().css({height : height * limit});/*控制div在图片消失的时候依然保持同样的高度不会因为div的消失而变化*/$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();/*通过调用遍历方法获得所有li元素在实现移除的方法*/ function spy(){/*开始第二个图片从最上方插入的效果*/var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);/*插入一个新的div，透明度和高度为零*/$list.find('> li:last').animate({ opacity : 0}, 1000, function(){/*通过遍历插入一个动画出现的效果 时间为1秒*/$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);/* 增加新的第一个div的高度*/$(this).remove();/*这个移除的效果是什么呢 就是在当我们第一次加载完页面的时候都会有几个只有图片没有属性值的li 清除就是在第一个动画结束后把没有属性的li给删除掉 没有属性的就是 没有高的 没有动画效果的li*/});currentItem++;/*永远在第一个li位置显示出现的是下一个li图片*/if(currentItem >= total){/*如果4张图片大于或等于所有的大于或等于整个图片的的话*/currentItem = 0;/*那么就从0开始*/}setTimeout(spy, interval)/*在ul和4秒内完成*/}spy();/*效果的整个开关*/});}; })(jQuery);</script><script type="text/javascript">$(document).ready(function(){$('ul.spy').simpleSpy();/*ul.spy调用simpleSpy()模版方法*/});</script></head><body><div title="View round"><img width="70" height="70" src="images/1.png" title="" /></a><h5><a href="http://www.17sucai.com/" title="View round">round</a></h5><p title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a><h5><a href="http://www.17sucai.com/" title="View reflet">reflet</a></h5><p title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a><h5><a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5><p title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a><h5><a href="http://www.17sucai.com/" title="View Untitled">Untitled</a></h5><p title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a><h5><a href="http://www.17sucai.com/" title="View My Tutorial's Library">My Tutorial's Library</a></h5><p title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a><h5><a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5><p title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a><h5><a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5><p title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a><h5><a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5><p title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a><h5><a href="http://www.17sucai.com/" title="View Values of n Blog">Values of n Blog</a></h5><p class="info">Nov 29th 2008 by John Doe</p></li></ul></div> </div></body></html>