ホームページ > 記事 > ウェブフロントエンド > ページブラインドの回転表示効果を実現するjqueryメソッド

ページブラインドの回転表示効果を実現するjqueryメソッド

WBOYオリジナル: 2016-05-16 16:10:061284ブラウズ

この記事の例では、jquery を使用してページブラインドのスクロール表示効果を実現する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

1. 以下に示すように、このコードは jquery1.3 以降のサポートを必要とします。

コードをコピーコードは次のとおりです:

jQuery.fn.extend((

関数($){

var l = 4,//スクロール行数

t=5000,//一度スクロールした後、次にスクロールを開始するまでにどれくらい時間がかかります

rt=500,//n スクロールごとの経過時間

n="li",//デフォルトのスクロールオブジェクトに含まれるスクロール対象のH​​TMLタグ

o="ul",//スクロールの場合、スクロール要素をラップする HTML タグ 
 が有効になります
e,//オブジェクトを呼び出します

en,//オブジェクト内でスクロールするすべてのオブジェクトのコレクションを呼び出します

h;// スクロール行の高さ

var vLimit=80;//視覚的な制限である 0.1 秒よりわずかに小さい

var maxRnum=Math.ceil(rt/vLimit);//最大スクロール数

var maxRh=0; // 各スクロールの高さ 

var fnRollFirst=function(arg){// arg を 1 n ずつロールアップし、完了後、最初の n を最後の位置に移動します 

var rCount=0 // スクロール数レコード
;
var rVal=setInterval(function(){//vLimit ごとに合計 maxRnum-1 回ループします 

rカウント ;

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

If(rCount>=(maxRnum-1)){//1 ボリュームが減ります

;
arg.scrollTop(arg.scroll Top() h-maxRh*(maxRnum-1));//最後に変更されたスクロール値

//最初の要素を最後に移動

var nowN=arg.children(n);

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

//最初の位置は、空になった後に巻き戻して修正する必要があります

};
},vLimit);

};

var fnRollArr=function(arg){//配列内のオブジェクトを 1 つずつスクロール開始します

var out=setInterval(function(){

fnRollFirst(arg.shift());

If(!arg.length){

;
};

},rt);
};
var fnRoll=function(){//スクロールする必要があるオブジェクトのコレクションを 1 つずつ取得します

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
en.slice(nu*i,nu*(i 1)).wrapAll(u);

};

var fnMain=function(){//Scroll main メソッド

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();

}その他{

return false;

};

};

return {

setLine: function(num){//スクロールする際に何行に分割するかを設定します

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

これを返します;

},

setTime: function(num){//スクロール間隔: ミリ秒

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

これを返します;

},

startRoll: function(){//スクロール開始

fnStart(this);

}
};

}

)(jQuery));