首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
jQuery 1.9.1源码分析系列（十五)之动画处理
Dec 03 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
javascript中如何判断类型汇总
May 14 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
pyqt5(3) MybatisPlus(2) css3 (2) pycharm(6) linux(15) DFA(1) Normal From(1) Qlabel(1) JSON(10) MapReduce(1)
You might like
B2K与车机的中波PK
2021/03/02 无线电
php源码加密 仿微盾PHP加密专家(PHPCodeLock）
2010/05/06 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
php验证手机号码
2015/11/11 PHP
PHP7匿名类用法分析
2016/09/26 PHP
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
记React connect的几种写法(小结)
2018/09/18 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
python实现飞行棋游戏
2020/02/05 Python
python中os包的用法
2020/06/01 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
Nice Kicks网上商店：ShopNiceKicks.com
2018/12/25 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
几个Linux面试题笔试题
2016/08/01 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
幼教个人求职信范文
2013/12/02 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
体育活动总结范文
2014/05/04 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
爱心捐书活动总结
2014/07/05 职场文书
小学综合实践活动总结
2014/07/07 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python