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

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

3、运行环境

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

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

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

6、代码

<!DOCTYPE HTML">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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="http://www.17sucai.com/" title="View round"><img width="70" height="70" src="data:images/1.png" title="" /></a>

                <h5><a href="http://www.17sucai.com/" title="View round">round</a></h5>

                <p class="info">Nov 29th 2008 by neue</p>

            </li>

            <li>

                <a href="http://www.17sucai.com/" title="View reflet"><img width="70" height="70" src="data:images/2.png" title="" /></a>

                <h5><a href="http://www.17sucai.com/" title="View reflet">reflet</a></h5>

                <p class="info">Nov 29th 2008 by neue</p>

            </li>

            <li>

                <a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="data:images/3.png" title="" /></a>

                <h5><a href="http://www.17sucai.com/" 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="http://www.17sucai.com/" title="View Untitled"><img width="70" height="70" src="data:images/4.png" title="" /></a>

                <h5><a href="http://www.17sucai.com/" title="View Untitled">Untitled</a></h5>

                <p class="info">Nov 29th 2008 by mike1052</p>

            </li>

            <li>

                <a href="http://www.17sucai.com/" title="View My Tutorial's Library"><img width="70" height="70" src="data:images/5.png" title="" /></a>

                <h5><a href="http://www.17sucai.com/" 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="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in"><img width="70" height="70" src="data:images/6.png" title="" /></a>

                <h5><a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in">Sandy &mdash; your free</a></h5>

                <p class="info">Nov 29th 2008 by John Doe</p>

            </li>

            <li>

                <a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in"><img width="70" height="70" src="data:images/7.png" title="" /></a>

                <h5><a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in">Sandy &mdash; your free</a></h5>

                <p class="info">Nov 29th 2008 by John Doe</p>

            </li>

            <li>

                <a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant"><img width="70" height="70" src="data:images/8.png" title="" /></a>

                <h5><a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant">Sandy &mdash; your free</a></h5>

                <p class="info">Nov 29th 2008 by John Doe</p>

            </li>

            <li>

                <a href="http://www.17sucai.com/" title="View Values of n Blog"><img width="70" height="70" src="data:images/9.png" title="" /></a>

                <h5><a href="http://www.17sucai.com/" 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练手：仿新浪微博图片文字列表淡进淡出上下滚动效果的更多相关文章

  1. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  2. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

  3. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  4. Jquery练手之-贪吃蛇

    记得以前刚出来工作的时候,什么都不懂.老板让用Jquery写一个功能,我不会写,然后跟老板说,我就是个.net程序员,为什么要写Jquery...后面我们老大给我写了!现在我才知道net程序员要会多少 ...

  5. js、jQuery实现文字上下无缝轮播、滚动效果

    因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...

  6. 折腾了一早上的C# WPF ListView+Grid 实现图片+文字 自动换行排列 类似Windows资源管理器效果

    <ListBox Name="lstFileManager" Background ="Transparent" ItemsSource="{B ...

  7. jQuery仿百度帖吧头部固定不随滚动条滚动效果

    <style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...

  8. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  9. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

随机推荐

  1. 六、django rest_framework源码之解析器剖析

    1 绪论 网络传输数据只能传输字符串格式的,如果是列表.字典等数据类型,需要转换之后才能使用但是我们之前的rest_framework例子都没有转换就直接可以使用了,这是因为rest_framewor ...

  2. Linux提权exp大全

    如下表 #CVE #Description #Kernels CVE-2017-1000367 [Sudo] (Sudo 1.8.6p7 - 1.8.20) CVE-2017-7494 [Samba ...

  3. 【JavaScript代码实现三】JS对象的深度克隆

    function clone(Obj) { var buf; if (Obj instanceof Array) { buf = []; // 创建一个空的数组 var i = Obj.length; ...

  4. JavaScript将具有父子关系的原始数据格式化成树形结构数据(id,pid)

    前几天遇到一个树型组件(类似树形菜单)数据格式化的问题,由于后台把原始查询的数据直接返回给前端,父子关系并未构建,因此需要前端JS来完成,后台返回的数据和下面的测试数据相似. var data=[ { ...

  5. Map:HashMap和TreeMap

    一.Map集合     特点:将键映射到值得对象 Map集合和Collection集合的区别? Collection:是单列集合,存储的是单独出现的元素    Map: 是双列集合,存储的是键值对形式 ...

  6. MySQL Innodb 存储引擎学习篇

    master thread的县城优先级别最高.其内部由几个循环(loop)组成:主循环(loop).后台循环(background loop).刷新循环(flush loop).暂停循环(suspen ...

  7. Linux系统不可不知的命令：sudo

    转自:http://www.embeddedlinux.org.cn/html/xinshourumen/201308/05-2608.html sudo是个统管一切的命令.它的字面意思是代表“超级用 ...

  8. Eclipse批量替换

    情景: 我需要将项目中所有有"上样板"的字样替换为"PCR板",如果寻找单个页面肯定是很麻烦,而且替换很有可能不全,那么该怎么才能完全替换呢? 解决方法: ec ...

  9. interlliJ idea 不识别文件类型的解决方式

    idea 支持非常多种文件类型.然而总有想不到. 近期开发jenkins 插件,jenkins 插件的页面开发大多用jelly 如何让idea识别jelly呢? ctrl+alt+s 快捷键打开配置页 ...

  10. 摘自知乎--mysql

    允许晚辈叫一声前辈.从前辈的描述中可以看出前辈对MySQL已经有很好的理解,但我还是想从我这个半知半解的晚辈角度提出几点. 1.系统学习数据库,最要紧的是把基本功打牢,所以<数据库系统概念 原书 ...