jQuery实现图片文字淡入淡出效果
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了jQuery实现图片文字淡入淡出效果,需要的朋友可以参考下
本实例主要讲解了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 /
#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./jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){
$.fn.simpleSpy = function (limit, interval){
limit = limit || 4;
/让div始终显示4个单位的高度/
interval = interval || 4000;
/控制每个动画效果的时间4000毫秒就是4秒 从最狼蚁网站SEO优化的图片消失到第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 class="spyWrapper" />').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 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 Pla"><img width="70" height="70" src="images/3.png" title="" /></a>
<h5><a href="#" title="View Kate Moross Little Big Pla">Kate Moross Little Big Pla</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实现图片文字淡入淡出效果的代码，希望对大家的学习有所帮助。
上一篇：浅析JavaScript声明变量
下一篇：深入浅析Node.js 事件循环
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程