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. React Native性能优化之可取消的异步操作

    前沿 在前端的项目开发中,异步操作是一个不可获取的,从用户的角度来说,异步操作所带来的体验是美妙的,但有时候也会带来一些性能隐患.比如说:有一个异步请求还没有返回结果,但是页面却关闭了,这时由于异步操 ...

  2. java I/O流类概述

    java I/O流类概述

  3. Java反射机制demo（四）—获取一个类的父类和实现的接口

    Java反射机制demo(四)—获取一个类的父类和实现的接口 1,Java反射机制得到一个类的父类 使用Class类中的getSuperClass()方法能够得到一个类的父类 如果此 Class 表示 ...

  4. [python 源码]字符串对象的实现

    还是带着问题上路吧,和整数对象的实现同样的问题: >>> a='abc' >>> b='abc' >>> a is b True >> ...

  5. BZOJ 3091: 城市旅行 lct 期望 splay

    https://www.lydsy.com/JudgeOnline/problem.php?id=3091 https://blog.csdn.net/popoqqq/article/details/ ...

  6. Linux免密登录

    ssh连接上服务器 ssh -p 端口 用户名@ip地址 获取本地的pub ssh key cd ~/.ssh vi id_rsa.pub 拷贝里面的内容 将拷贝的内容放到服务器的authorized ...

  7. Eclipse 工具下Maven 项目的快速搭建

    Eclipse 工具下Maven 项目的搭建 参考博文:https://www.cnblogs.com/iflytek/p/7096481.html 什么是Maven项目 简单来说,传统的Web项目: ...

  8. elasticsearch实例讲解增删改查

    1.首先弄明白四个概念 elasticsearch 关系型数据库 index 数据库 type 表 document 行 field 字段 如果刚一开始理解比较困难,那你就在心中默念100遍,10遍也 ...

  9. 一个".java"的源文件中，是否可以包含多个类？(除了匿名内部类），有什么限制？

    # 二.一个".java"的源文件中,是否可以包含多个类?(除了匿名内部类),有什么限制?   - 可以包含多个类   - 条件:其它类不能用private.public.prot ...

  10. mysql学习心得转

    http://www.cnblogs.com/lyhabc/p/3691555.html