编程 Javascript

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

Posted in Javascript onDecember 21, 2015

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

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

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

3、运行环境

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

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

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

效果图：

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

代码：

<!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.com/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秒 从最下面的图片消失到第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 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实现图片文字淡入淡出效果的代码，希望对大家的学习有所帮助。

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

- Author -

jerrylsxu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

setInterval 和 setTimeout会产生内存溢出

Feb 15 Javascript

javascript cookie解码函数（兼容ff）

Mar 17 Javascript

js模拟C#中List的简单实例

Mar 06 Javascript

jquery模拟进度条实现方法

Aug 03 Javascript

js闭包引起的事件注册问题介绍

Mar 29 Javascript

浅析JSONP技术原理及实现

Jun 08 Javascript

JavaScript函数参数的传递方式详解

Mar 06 Javascript

基于node.js制作简单爬虫教程

Jun 29 Javascript

Vue实现动态创建和删除数据的方法

Mar 17 Javascript

vue2.0 实现导航守卫（路由守卫）

May 21 Javascript

通过jquery的ajax请求本地的json文件方法

Aug 08 jQuery

Electron 如何调用本地模块的方法

Feb 01 Javascript

深入浅析Node.js 事件循环

Dec 20 #Javascript

JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

Dec 20 #Javascript

基于jQuery和CSS3制作响应式水平时间轴附源码下载

Dec 20 #Javascript

jQuery mobile 移动web(4)

Dec 20 #Javascript

基于jQuery实现放大镜特效

Oct 19 #Javascript

jQuery mobile 移动web(6)

Dec 20 #Javascript

jquery mobile 移动web(5)

Dec 20 #Javascript

You might like

PHP获得用户使用的代理服务器ip即真实ip

2006/12/31 PHP

php输出xml必须header的解决方法

2014/10/17 PHP

php 从一个数组中随机的取出若干个不同的数实例

2016/12/31 PHP

thinkPHP框架实现多表查询的方法

2018/06/14 PHP

关于IE、Firefox、Opera页面呈现异同写脚本很痛苦

2009/08/28 Javascript

js中的string.format函数代码

2020/08/11 Javascript

JS合并数组的几种方法及优劣比较

2014/09/19 Javascript

js实现的全国省市二级联动下拉选择菜单完整实例

2015/08/17 Javascript

JavaScript学习小结(一)——JavaScript入门基础

2015/09/02 Javascript

JavaScript小技巧整理

2015/12/30 Javascript

关于JavaScript的单双引号嵌套问题

2017/08/20 Javascript

ActiveX控件的使用-js实现打印超市小票功能代码详解

2017/11/22 Javascript

微信web端后退强制刷新功能的实现代码

2018/03/04 Javascript

JavaScript函数的4种调用方法实例分析

2019/03/05 Javascript

详解vue配置后台接口方式

2019/03/29 Javascript

js实现计时器秒表功能

2019/12/16 Javascript

vue实现在进行增删改操作后刷新页面

2020/08/05 Javascript

python批量下载图片的三种方法

2013/04/22 Python

python正则表达式match和search用法实例

2015/03/26 Python

利用python为运维人员写一个监控脚本

2018/03/25 Python

Python 窗体(tkinter)按钮位置实例

2019/06/13 Python

pandas 数据索引与选取的实现方法

2019/06/21 Python

python 画条形图(柱状图)实例

2020/04/24 Python

scrapy框架携带cookie访问淘宝购物车功能的实现代码

2020/07/07 Python

详解Python中的路径问题

2020/09/02 Python

详解用python -m http.server搭一个简易的本地局域网

2020/09/24 Python

class类在python中获取金融数据的实例方法

2020/12/10 Python

使用pandas读取表格数据并进行单行数据拼接的详细教程

2021/03/03 Python

应届毕业生自我评价分享

2013/12/15 职场文书

诚信考试承诺书

2014/03/27 职场文书

自我推荐信格式模板

2015/03/24 职场文书

2016国培学习心得体会

2016/01/08 职场文书

小学三年级语文教学反思

2016/03/03 职场文书

演讲开头怎么书写？

2019/08/06 职场文书

golang 生成对应的数据表struct定义操作

2021/04/28 Golang

Python一些基本的图像操作和处理总结

2021/06/23 Python