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和解压后的图片文件夹放在同一个文件夹内效果

效果图：

代码：

*{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;}



 

 


 

 
 jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动
 
 
  

   

    
    round
    
Nov 29th 2008 by neue
   
   

    
    reflet
    
Nov 29th 2008 by neue
   
   

    
    Kate Moross Little Big Planet
    
Nov 29th 2008 by neue
   
   

    
    Untitled
    
Nov 29th 2008 by mike1052
   
   

    
    My Tutorial's Library
    
Nov 29th 2008 by FrancescoOnAir
   
   

    
    Sandy — your free
    
Nov 29th 2008 by John Doe
   
   

    
    Sandy — your free
    
Nov 29th 2008 by John Doe
   
   

    
    Sandy — your free
    
Nov 29th 2008 by John Doe
   
   

    
    Values of n Blog
    
Nov 29th 2008 by John Doe
   
  
 
  

 

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