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

この記事の例では、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));

2. ページは次のようになります

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

 

     李飞正在申请成为经验达人
 

 

     李飞已向职场专题《我是个亚太人呀亚太人》投稿
 

 

     董川民已成功购买职场专题《我是个亚太人呀亚太人》
 

 

     李飞对《我是个亚太人呀亚太人》的解决方案又卖出一次
 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

   
 

     李飞向职场专题《我是个亚太人呀亚太人》的投稿已通过审核，获得1元奖励。
 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥评论经验：
    

人生感悟及处事技巧人生感悟及处事

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

  
 

     李飞已正式成为经验达人
 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥评论经验：
    

人生感悟及处事技巧人生感悟及处事

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

    
 

     李飞已邀请董川民成为经验达人
 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥评论经验：
    

人生感悟及处事技巧人生感悟及处事

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

Sannerio Da Fei の質問に答えました

人生に関する洞察と対処スキル 人生に関する洞察?

//複雑な呼び出しの書き込み
//$("#re").setLine(5).setTime(3000).startRoll();
// 単純な呼び出し
$("#re").startRoll();

この記事が皆さんの jQuery プログラミングに役立つことを願っています。