首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

完美兼容各大浏览器的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>

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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
Git(3) cudn(1) swing(1) SandBox(1) cudnn(1) RTX 3050 ti(1) callback(1) OpenFeign(1) 热力图(1) webpack(1)
You might like
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php类自动加载器实现方法
2015/07/28 PHP
php图片添加水印例子
2016/07/20 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
基于VUE选择上传图片并页面显示（图片可删除）
2017/05/25 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
举例讲解Python常用模块
2019/03/08 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
阿迪达斯俄罗斯官方商城：adidas俄罗斯
2017/03/08 全球购物
美国床垫和床上用品公司：Nest Bedding
2017/06/12 全球购物
椰子猫砂：CatSpot
2018/08/27 全球购物
吉尔德利巧克力公司：Ghirardelli Chocolate Company
2019/03/27 全球购物
SQL语言面试题
2013/08/27 面试题
兽医医药专业求职信
2014/07/27 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
办护照工作证明
2014/10/01 职场文书
优秀范文：读《红岩》有感3篇
2019/10/14 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android