国产激情久久久久影院小草_国产91高跟丝袜_99精品视频99_三级真人片在线观看

jquery實(shí)現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的有效方法

時(shí)間:2024-06-13 22:36:53 jQuery Mobile 我要投稿
  • 相關(guān)推薦

jquery實(shí)現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的有效方法

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

  復(fù)制代碼 代碼如下:jQuery.fn.extend((

  function($){

  var l = 4,//卷動(dòng)行數(shù)

  t=5000,//卷動(dòng)完一次后,隔多長時(shí)間下次開始卷動(dòng)

  rt=500,//每個(gè)n卷動(dòng)過去的耗時(shí)

  n="li",//默認(rèn)的卷動(dòng)對象內(nèi)包含的要卷動(dòng)的HTML標(biāo)記

  o="ul",//如果卷動(dòng)時(shí),啟用的包裹卷動(dòng)元素的HTML標(biāo)記

  e,//調(diào)用對象

  en,//調(diào)用對象內(nèi)所有的要卷動(dòng)的對象集合

  h;//卷動(dòng)行高度

  var vLimit=80;//比視覺極限0.1s還小點(diǎn)

  var maxRnum=Math.ceil(rt/vLimit);//最大卷動(dòng)次數(shù)

  var maxRh=0;//每次卷動(dòng)高度

  var fnRollFirst=function(arg){//將arg向上卷1個(gè)n,完成之后將第1個(gè)n移動(dòng)到最后一個(gè)位置

  var rCount=0;//卷動(dòng)次數(shù)紀(jì)錄

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

  rCount++;

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

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

  clearInterval(rVal);

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

  //移動(dòng)第一個(gè)元素到最后

  var nowN=arg.children(n);

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

  //第一個(gè)位置空出后需要通過倒卷修正回來

  arg.scrollTop(-h);

  };

  },vLimit);

  };

  var fnRollArr=function(arg){//對數(shù)組中的對象逐一啟動(dòng)卷動(dòng)

  var out=setInterval(function(){

  fnRollFirst(arg.shift());

  if(!arg.length){

  clearInterval(out);

  };

  },rt);

  };

  var fnRoll=function(){//獲得需要逐個(gè)卷動(dòng)的對象集合

  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+">");

  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(){//卷動(dòng)主方法

  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){//設(shè)置要分成多少行來卷動(dòng)

  (!isNaN(num) && num>0)";

  return this;

  },

  setTime : function(num){//卷動(dòng)間隔時(shí)間:毫秒

  (!isNaN(num) && num>0)";

  return this;

  },

  startRoll : function(){//啟動(dòng)卷動(dòng)

  fnStart(this);

  }

  };

  }

  )(jQuery));

  2. 頁面可以是這樣子

  復(fù)制代碼 代碼如下:

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

  //簡單的調(diào)用

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


【jquery實(shí)現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的有效方法】相關(guān)文章:

關(guān)于jquery簡單圖片切換顯示效果實(shí)現(xiàn)方法介紹10-01

關(guān)于jQuery實(shí)現(xiàn)高亮顯示的方法介紹08-20

Word頁面顯示異常處理辦法06-18

有效果的時(shí)間管理方法09-21

最有效果的英語學(xué)習(xí)方法08-04

盤點(diǎn)冷門卻有效果的網(wǎng)絡(luò)推廣方法09-24

jQuery(js)如何獲取文字寬度(顯示長度)09-29

jQuery中prev()方法用法07-16

jQuery中replaceAll()方法用法10-15

用SQL實(shí)現(xiàn)查詢數(shù)據(jù)不顯示錯(cuò)誤數(shù)據(jù)的方法08-19