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. 配置k8s dns

    DNS (domain name system),提供域名解析服务,解决了难于记忆的IP地址问题,以更人性可读可记忆可标识的方式映射对应IP地址. Cluster DNS扩展插件用于支持k8s集群系统 ...

  2. C# 简单读写ini文件帮助类 INIHelp

    软件里需要读取一些初始化信息, 决定用ini来做,简单方便. 于是查了一写代码,自己写了一个帮助类. INI文件格式是某些平台或软件上的配置文件的非正式标准, 以节(section)和键(key)构成 ...

  3. BZOJ 1283 序列 费用流 网络流 线性规划

    https://darkbzoj.cf/problem/1283 给出一个长度为N的正整数序列Ci,求一个子序列,使得原序列中任意长度为M的子串中被选出的元素不超过K(K,M<=100) 个,并 ...

  4. 【字符串哈希】The 16th UESTC Programming Contest Preliminary F - Zero One Problem

    题意:给你一个零一矩阵,q次询问,每次给你两个长宽相同的子矩阵,问你它们是恰好有一位不同,还是完全相同,还是有多于一位不同. 对每行分别哈希,先一行一行地尝试匹配,如果恰好发现有一行无法对应,再对那一 ...

  5. CentOS系统下中文文件名乱码

    原文来自:http://www.zhukun.net/archives/7434 CentOS系统下中文文件名乱码 2014/09/01Linux运维centos.Linuxbear 从windows ...

  6. python学习两月总结_汇总大牛们的思想_值得收藏

    下面是我汇总的我学习两个月python(version:3.3.2)的所有笔记 你可以访问:http://www.python.org获取更多信息 你也可以访问:http://www.cnblogs. ...

  7. hihocoder #1301 : 筑地市场 二分+数位dp

    #1301 : 筑地市场 题目连接: http://hihocoder.com/problemset/problem/1301 Description 筑地市场是位于日本东京都中央区筑地的公营批发市场 ...

  8. 0056 Spring MVC如何接收浏览器传递来的请求参数--request--形参--实体类封装

    浏览器总会向服务器传递一些参数,那么Spring MVC如何接收这些参数? 先写个简单的html,向服务器传递一些书籍信息,如下: <!DOCTYPE html> <html> ...

  9. Asky极简教程：零基础1小时学编程，已更新前8节

    Asky极简架构 开源Asky极简架构.超轻量级.高并发.水平扩展.微服务架构 <Asky极简教程:零基础1小时学编程>开源教程 零基础入门,从零开始全程演示,如何开发一个大型互联网系统, ...

  10. php curl伪造referer

    CURL方式: SOCKET方式: file_get_contents方法: 通过上面的代码,我们就把referer地址伪装为http://www.xxxx.com,你可以写一段代码: $_SERVE ...