jquery实现页面百叶窗走马灯式翻滚显示效果的方法


Posted in Javascript onMarch 12, 2015

本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法。分享给大家供大家参考。具体如下:

1. 这里的代码需要jquery1.3以上的支持,如下所示:

jQuery.fn.extend((

    function($){

        var l = 4,//卷动行数

            t=5000,//卷动完一次后,隔多长时间下次开始卷动

            rt=500,//每个n卷动过去的耗时

            n="li",//默认的卷动对象内包含的要卷动的HTML标记

            o="ul",//如果卷动时,启用的包裹卷动元素的HTML标记

            e,//调用对象

            en,//调用对象内所有的要卷动的对象集合

            h;//卷动行高度

        var vLimit=80;//比视觉极限0.1s还小点

        var maxRnum=Math.ceil(rt/vLimit);//最大卷动次数

        var maxRh=0;//每次卷动高度

        var fnRollFirst=function(arg){//将arg向上卷1个n,完成之后将第1个n移动到最后一个位置

            var rCount=0;//卷动次数纪录

            var rVal=setInterval(function(){//每隔vLimit循环一次,共循环maxRnum-1次

                        rCount++;

                        arg.scrollTop(arg.scrollTop()+maxRh);

                        if(rCount>=(maxRnum-1)){//少卷1次

                            clearInterval(rVal);

                            arg.scrollTop(arg.scrollTop()+h-maxRh*(maxRnum-1));//最后1次修正卷动值

                            //移动第一个元素到最后

                            var nowN=arg.children(n);

                            nowN.eq(nowN.length-1).after(nowN.eq(0));

                            //第一个位置空出后需要通过倒卷修正回来

                            arg.scrollTop(-h);

                        };

                    },vLimit);

        };

        var fnRollArr=function(arg){//对数组中的对象逐一启动卷动

            var out=setInterval(function(){

                fnRollFirst(arg.shift());

                if(!arg.length){

                    clearInterval(out);

                };

            },rt);      

        };

        var fnRoll=function(){//获得需要逐个卷动的对象集合

            var arr=new Array();

            e.children(o).each(function(){

                var rn=$(this).children(n);

                if(rn.length>1){

                    arr.push($(this));

                };

            });

            setInterval(function(){

                fnRollArr(arr.slice(0));

            },t);

        };

        var fnLay=function(){//布局页面

            h=en.height();

            var nu=Math.ceil(en.length/l);

            var u=$("<"+o+"></"+o+">");

            u.css({"overflow":"hidden","height":h+"px","margin-bottom":"15px"});

            for(var i=0;i<l;i++){

                en.slice(nu*i,nu*(i+1)).wrapAll(u);

            };          

        };

        var fnMain=function(){//卷动主方法

            if(maxRnum>1){

                fnLay();

                maxRh=Math.ceil(h/maxRnum);

                fnRoll();

            };

        };

        var fnStart= function(arg){//初始化显示方式

            e=arg;

            en = e.children(n);

            en.show();

            if(en.length>l){

                fnMain();

            }else{

                return false;

            };

        };

        return {

            setLine : function(num){//设置要分成多少行来卷动

                (!isNaN(num) && num>0)?l=num:"";

                return this;

            },

            setTime : function(num){//卷动间隔时间:毫秒

                (!isNaN(num) && num>0)?t=num:"";

                return this;

            },

            startRoll : function(){//启动卷动

                fnStart(this);

            }

        };

    }

)(jQuery));

2. 页面可以是这样子
<div id="re" class="dynamic">

 <li>

     <a href="#" class="name">李飞</a>正在申请成为经验达人

 </li>

 <li>

     <a href="#" class="name">李飞</a>已向职场专题《<a href="">我是个亚太人呀亚太人</a>》投稿

 </li>

 <li>

     <a href="#" class="name">董川民</a>已成功购买职场专题《<a href="#">我是个亚太人呀亚太人</a>》

 </li>

 <li>

     <a href="#" class="name">李飞</a>对《<a href="">我是个亚太人呀亚太人</a>》的解决方案又卖出一次

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

    

 <li>

     <a href="#" class="name">李飞</a>向职场专题《<a href="#">我是个亚太人呀亚太人</a>》的投稿已通过审核,获得1元奖励。

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>评论经验:

     <div class="text"><a href="">人生感悟及处事技巧人生感悟及处事</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

   

 <li>

     <a href="#" class="name">李飞</a>已正式成为经验达人

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>评论经验:

     <div class="text"><a href="">人生感悟及处事技巧人生感悟及处事</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

     

 <li>

     <a href="#" class="name">李飞</a>已邀请<a href="#" class="name">董川民</a>成为经验达人

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>评论经验:

     <div class="text"><a href="">人生感悟及处事技巧人生感悟及处事</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

</div>

<script type="text/javascript">

//复杂点的调用写法

//$("#re").setLine(5).setTime(3000).startRoll();

//简单的调用

$("#re").startRoll();

</script>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
js操作二进制数据方法
Mar 03 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
window.open()实现post传递参数
Mar 12 #Javascript
js运动动画的八个知识点
Mar 12 #Javascript
js实现最短的XML格式化工具实例
Mar 12 #Javascript
微信中一些常用的js方法汇总
Mar 12 #Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 #Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 #Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 #Javascript
You might like
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php生成短网址示例
2014/05/05 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
js获取客户端外网ip的简单实例
2013/11/21 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
Python threading多线程编程实例
2014/09/18 Python
python显示生日是星期几的方法
2015/05/27 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
.NET概念性的面试题
2012/02/29 面试题
班组安全员工作职责
2014/02/01 职场文书
公益活动邀请函
2014/02/05 职场文书
大学生校园创业计划书
2014/02/08 职场文书
库房管理员岗位职责
2014/03/09 职场文书
酒店前台辞职书
2015/02/26 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
保留意见审计报告
2015/06/05 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
工作证明书
2015/06/15 职场文书
广播体操比赛主持词
2015/06/29 职场文书
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL