1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动
2、实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行。
3、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
4、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
5、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果
6、代码
复制代码 代码如下:
*{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仿新浪微博图片文字列表间隙滚动淡进淡出滚动
https://www.jb51.net/" title="View round">
https://www.jb51.net/" title="View round">round
Nov 29th 2008 by neue
https://www.jb51.net/" title="View reflet">
https://www.jb51.net/" title="View reflet">reflet
Nov 29th 2008 by neue
https://www.jb51.net/" title="View Kate Moross Little Big Planet">
https://www.jb51.net/" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet
Nov 29th 2008 by neue
https://www.jb51.net/" title="View Untitled">
https://www.jb51.net/" title="View Untitled">Untitled
Nov 29th 2008 by mike1052
https://www.jb51.net/" title="View My Tutorial's Library">
https://www.jb51.net/" title="View My Tutorial's Library">My Tutorial's Library
Nov 29th 2008 by FrancescoOnAir
https://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in">
https://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free
Nov 29th 2008 by John Doe
https://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in">
https://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free
Nov 29th 2008 by John Doe
https://www.jb51.net/" title="View Sandy — your free personal email assistant">
https://www.jb51.net/" title="View Sandy — your free personal email assistant">Sandy — your free
Nov 29th 2008 by John Doe
https://www.jb51.net/" title="View Values of n Blog">
https://www.jb51.net/" title="View Values of n Blog">Values of n Blog
Nov 29th 2008 by John Doe