完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效


Posted in Javascript onNovember 12, 2014

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="https://3water.com/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a>

                <h5><a href="https://3water.com/" title="View round">round</a></h5>

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

            </li>

            <li>

                <a href="https://3water.com/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a>

                <h5><a href="https://3water.com/" title="View reflet">reflet</a></h5>

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

            </li>

            <li>

                <a href="https://3water.com/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a>

                <h5><a href="https://3water.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="https://3water.com/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a>

                <h5><a href="https://3water.com/" title="View Untitled">Untitled</a></h5>

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

            </li>

            <li>

                <a href="https://3water.com/" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a>

                <h5><a href="https://3water.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="https://3water.com/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a>

                <h5><a href="https://3water.com/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>

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

            </li>

            <li>

                <a href="https://3water.com/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a>

                <h5><a href="https://3water.com/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>

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

            </li>

            <li>

                <a href="https://3water.com/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a>

                <h5><a href="https://3water.com/" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5>

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

            </li>

            <li>

                <a href="https://3water.com/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a>

                <h5><a href="https://3water.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>

怎么样,效果相当不错吧。

Javascript 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
JavaScript实现关键字高亮功能
Nov 12 #Javascript
javascript的函数作用域
Nov 12 #Javascript
浅析javascript的间隔调用和延时调用
Nov 12 #Javascript
jQuery的deferred对象详解
Nov 12 #Javascript
探寻Javascript执行效率问题
Nov 12 #Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 #Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 #Javascript
You might like
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
JavaScript入门学习书籍推荐
2008/06/12 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
计算机专业毕业生求职信分享
2013/12/24 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
施工协议书范本
2014/04/22 职场文书
实习证明格式范文
2014/10/14 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL