jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015-03-12 00:00
2081 查看
本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法。分享给大家供大家参考。具体如下:
1. 这里的代码需要jquery1.3以上的支持,如下所示:
2. 页面可以是这样子
希望本文所述对大家的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简单图片切换显示效果实现方法
- 由于设计页面需要,要把两个并排显示的 div 实现一样高的效果, n 行 n 列布局,每列高度(事先并不能确定哪列的高度)相同,每个设计师追求的目标。方法有以下几种: 1 JS 实现(判断 2 个 d
- jQuery实现当前页面标签高亮显示的方法
- jQuery实现当前页面标签高亮显示的方法
- jquery实现页面关键词高亮显示的方法
- jQuery事件 mouseover方法与mouseout方法实现鼠标移进显示移出消失的效果 (css控制span标签)
- jQuery实现网站添加高亮突出显示效果的方法
- jQuery实现网站添加高亮突出显示效果的方法
- jQuery实现页面顶部显示的进度条效果完整实例
- jQuery实现页面顶部显示的进度条效果完整实例
- [转]用 jQuery 实现页面滚动(Scroll)效果的完美方法
- 纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
- 用 jQuery 实现页面滚动(Scroll)效果的完美方法
- 用 jQuery 实现页面滚动(Scroll)效果的完美方法
- 教程:MediaWiki实现目录浮动及隐藏效果和不在该页面显示目录的方法.
- 有了html页面,进行二次显示,通过html、JavaScript、jQuery的ajax三种技术,我可以实现任何界面效果
- jQuery实现基本隐藏与显示效果的方法详解
- jquery简单图片切换显示效果实现方法