jQuery实现图片文字淡入淡出效果

时间：2021-05-26

本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果，分享给大家供大家参考，具体内容如下

1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动

2、实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行。

3、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

4、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

5、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

效果图：

代码：

<!DOCTYPE HTML"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><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{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="http://code.jquery.com/jquery-1.9.1.js"></script><script type="text/javascript">(function($){ $.fn.simpleSpy = function (limit, interval){ limit = limit || 4; interval = interval || 4000; return this.each(function(){ var $list = $(this), items = [], currentItem = limit, total = 0, height = $list.find('> li:first').height(); $list.find('> li').each(function(){ items.push('<li>' + $(this).html() + '</li>'); }); total = items.length; $list.wrap('<div class="spyWrapper" />').parent().css({height : height * limit}); $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove(); function spy(){ var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list); $list.find('> li:last').animate({ opacity : 0}, 1000, function(){ $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000); $(this).remove(); }); currentItem++; if(currentItem >= total){ currentItem = 0; } setTimeout(spy, interval) } spy(); }); }; })(jQuery);</script> <script type="text/javascript">$(document).ready(function(){ $('ul.spy').simpleSpy(); });</script> </head><body> <div class="demo"> <h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2> <div id="sidebar"> <ul class="spy"> <li> <a href="#" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a> <h5><a href="htt#" title="View round">round</a></h5> <p class="info">Nov 29th 2008 by neue</p> </li> <li> <a href="#" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a> <h5><a href="#" title="View reflet">reflet</a></h5> <p class="info">Nov 29th 2008 by neue</p> </li> <li> <a href="#" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a> <h5><a href="#" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5> <p class="info">Nov 29th 2008 by neue</p> </li> <li> <a href="#" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a> <h5><a href="#" title="View Untitled">Untitled</a></h5> <p class="info">Nov 29th 2008 by mike1052</p> </li> <li> <a href="#" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a> <h5><a href="#" title="View My Tutorial's Library">My Tutorial's Library</a></h5> <p class="info">Nov 29th 2008 by FrancescoOnAir</p> </li> <li> <a href="#" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a> <h5><a href="#" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5> <p class="info">Nov 29th 2008 by John Doe</p> </li> <li> <a href="#" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a> <h5><a href="#" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5> <p class="info">Nov 29th 2008 by John Doe</p> </li> <li> <a href="#" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a> <h5><a href="#" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5> <p class="info">Nov 29th 2008 by John Doe</p> </li> <li> <a href="#" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a> <h5><a href="#" 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>

以上就是jQuery实现图片文字淡入淡出效果的代码，希望对大家的学习有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章