jquery实现页面百叶窗走马灯式翻滚显示效果的方法
孔征
本文向大家介绍jquery实现页面百叶窗走马灯式翻滚显示效果的方法，包括了jquery实现页面百叶窗走马灯式翻滚显示效果的方法的使用技巧和注意事项，需要的朋友参考一下
本文实例讲述了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程序设计有所帮助。
类似资料：
-
本文向大家介绍jquery实现百叶窗效果，包括了jquery实现百叶窗效果的使用技巧和注意事项，需要的朋友参考一下 今天试着用jq写了下图片百叶窗效果，就是鼠标经过那张图，那张图显示，其他图片缩小~ 最开始看效果的时候觉得好复杂，以为是宽度的变化写的动画，但是后来细想，如果是宽度变化，那么图片变窄的时候肯定会失真了，后来经过学习，发现原来原理很简单： 基本原理就是，将图片都绝对定位到盒子里，然后分
-
本文向大家介绍vue 实现走马灯效果，包括了vue 实现走马灯效果的使用技巧和注意事项，需要的朋友参考一下 Part.1 问题 在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果 Part.2 实现 我的做法：利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 Part.3 代码 HTML CSS JS Part.4 注意点 在 js 中我使用的是
-
本文向大家介绍jQuery实现图片走马灯效果的原理分析，包括了jQuery实现图片走马灯效果的原理分析的使用技巧和注意事项，需要的朋友参考一下 本文实例分析了jQuery实现图片走马灯效果的原理。分享给大家供大家参考，具体如下： 这里只讲解水平走马灯效果，垂直向上走马灯效果不讲解，原理一样，但是水平走马灯效果有一个小坑。待会讲解 先上代码： HTML： 在<div class="box">中，再包
-
本文向大家介绍Android实现文字垂直滚动、纵向走马灯效果的实现方式汇总，包括了Android实现文字垂直滚动、纵向走马灯效果的实现方式汇总的使用技巧和注意事项，需要的朋友参考一下 方法一、使用系统控件ViewFlipper方式： 布局文件： 背景文件：warning_bg.xml 切入动画：slide_in_bottom.xml 切出动画：slide_out_top.xml 注意：如果不在
-
本文向大家介绍iOS 实现跑马灯效果的方法示例，包括了iOS 实现跑马灯效果的方法示例的使用技巧和注意事项，需要的朋友参考一下 在网页开发当中跑马灯是常用到的，用来显示通知等，在游戏开发当中也如此。 首先来看看效果图： 接下来就简单看看这效果是怎么实现的。 实现方法 1、首先我们从这个图片里面能联想到如果实现这个效果必然需要使用到动画，或者还有有用scrollView的思路，这里我是用的动画的方式
-
本文向大家介绍jQuery实现点击图片翻页展示效果的方法，包括了jQuery实现点击图片翻页展示效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现点击图片翻页展示效果的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jQuery程序设计有所帮助。