jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果

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练手：仿新浪微博图片文字列表淡进淡出上下滚动效果的更多相关文章

javascript仿新浪微博图片放大缩小及旋转效果
javascript仿新浪微博图片放大缩小及旋转效果经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...
[jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件那一年那一年,我还年轻刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
Jquery练手之-贪吃蛇
记得以前刚出来工作的时候,什么都不懂.老板让用Jquery写一个功能,我不会写,然后跟老板说,我就是个.net程序员,为什么要写Jquery...后面我们老大给我写了!现在我才知道net程序员要会多少 ...
js、jQuery实现文字上下无缝轮播、滚动效果
因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...
折腾了一早上的C# WPF ListView+Grid 实现图片+文字自动换行排列类似Windows资源管理器效果
<ListBox Name="lstFileManager" Background ="Transparent" ItemsSource="{B ...
jQuery仿百度帖吧头部固定不随滚动条滚动效果
<style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

随机推荐

[漏洞复现] CVE-2017-11882 通杀所有Office版本
此漏洞是由Office软件里面的 [公式编辑器] 造成的,由于编辑器进程没有对名称长度进行校验,导致缓冲区溢出,攻击者通过构造特殊的字符,可以实现任意代码执行. 举个例子,如果黑客利用这个漏洞,构造带 ...
利用python实现新浪微博爬虫
第一个模块,模拟登陆sina微博,创建weiboLogin.py文件,输入以下代码: #! /usr/bin/env python # -*- coding: utf-8 -*- import sys ...
LCD
<LCD硬件体系结构> LCD控制器:位于ARM核内部,为LCD提供需要显示的数据,控制信息,控制时序 <LCD控制器结构> REGBANKK : 寄存器组,总共有17个寄存器 ...
ONVIF开发实例
<开发过过程中的经验总结> ➤工具的使用 (1)首先将文件soapClientLib.c 中"代码"的第二行和第三行注释掉,实际上该文件根本没有用,为了保险起见 ...
排序算法之直接插入排序Java实现
排序算法之直接插入排序舞蹈演示排序: 冒泡排序: http://t.cn/hrf58M 希尔排序:http://t.cn/hrosvb 选择排序:http://t.cn/hros6e 插入排序: ...
【枚举】【二分】Codeforces Round #477 (rated, Div. 2, based on VK Cup 2018 Round 3) D. Resource Distribution
题意:有两个服务要求被满足,服务S1要求x1数量的资源,S2要求x2数量的资源.有n个服务器来提供资源,第i台能提供a[i]的资源.当你选择一定数量的服务器来为某个服务提供资源后,资源需求会等量地分担 ...
VMWare虚拟机下CentOS 配置网络实现远程连接,提供Web访问
最近使用VMWARE虚拟机当中redhat操作系统,感觉直接使用很不方便,于是就决定配置下redhat网络,通过本机远程工具SecureCRT来连接redhat使用. 环境说明:本机操 ...
认识javascript中的作用域和上下文
javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的 ...
Codeforces Round #355 (Div. 2) D. Vanya and Treasure 分治暴力
D. Vanya and Treasure 题目连接: http://www.codeforces.com/contest/677/problem/D Description Vanya is in ...
(转)js中的hasOwnProperty和isPrototypeOf方法
hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象.不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员.isPrototypeOf ...

jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果

jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果的更多相关文章

随机推荐

热门专题