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实现图片文字淡入淡出效果的代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
深入浅析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
德劲1103二次变频版的打磨
2021/03/02 无线电
3款值得推荐的微信开发开源框架
2014/10/28 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Python pip配置国内源的方法
2020/02/14 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
收银员岗位职责
2014/02/07 职场文书
工作建议书范文
2014/05/13 职场文书
安全宣传标语
2014/06/10 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
车辆管理制度范本
2015/08/05 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书