カプセル化されたjqueryページスクロール（サンプルコード）_jquery

HTML 構造:

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

ul._rollSe{幅:100px;高さ:300px;オーバーフロー:非表示}
ul._rollSe li._rollPar{高さ:100px;ボーダー:1px ソリッド #369}

コードをコピーします コードは次のとおりです。

<div class="_rollParent"> 🎜> <ul class="_rollPageSe">
<li class="_rollpage">1</li>
<li class="_rollpage">2</li>
</ul>
<div>
<a href="#" mce_href="#" class="_scrollPrev" data-frequency="3" data-pr="happy">前のページ</ a>
<a href="#" mce_href="#" class="_scrollNext" data-frequency="3" data-pr="happy">次のページ</a> ;/div> class="_rollPar"<?php echo $a; ?></li>
<?php endfor;? gt;
</ul>
</div> ;


JS インポート ファイル:

<script type="text/javascript" src="/js/jquery//scrollTo/jquery.scrollTo-min.js"></script>

著者 : テレサ 2011-3-28
params: 上記 HTML 構造の必須項目: 関連クラス

_rollParent: イベントをトリガーした上位層)

_rollSe: スクロール領域

_rollPar: スクロール要素

_scrollNext: 次のページボタン

_scrollPrev: 前ページボタン

_rollPageSe: ページング領域

_rollpage: ページ番号要素

data-frequency: スクロール頻度 (例: 一度に 3 つの要素をスクロール) -> イベントをトリガーするボタンにマークを付ける必要があります。

data-pr: Cookie プレフィックス。

説明: 一度に複数のデータを読み取り、数個だけを表示し、ページをスクロールします (一度に 3 個または n 個のデータをスクロールします)。このメソッドでは、HTML 要素に必要なイベント スクロール効果をマークするだけで済みます。上記で指定されたクラスで利用可能です。

JS 初期化メソッド:

コードをコピー

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

/*************************************************** * ************************
説明: ページスクロール
*************** ********* **************************************** ********** ********/
//プラグインの紹介
document.write('<mce:script type="text/javascript" src="/js/jquery //scrollTo/jquery.scrollTo-min.js" mce_src="js/jquery//scrollTo/jquery.scrollTo-min.js"></mce:script>');
//関数の初期化
$(function(){
/*
author: teresa 2011-03-24 14:32:42
description: destroyTo init
*/
//初期表示のスクロール
_scroll.init();
//上にスクロール
$('._scrollPrev').live('click',function(){
_scroll.prev(this);
return false;
});
//下にスクロールします
$('._scrollNext').live('click',function(){
_scroll.next(this);
return false;
});
});
/*
作成者: テレサ
更新時刻: 2011-03-24 14:52:34
説明: ページング スクロール
*/
var _scroll = {
//ローリング Cookie
config:{
ckname : 'lifedu_rollCur',
ckoptions : {
有効期限 : 3, // 日
パス : '/'
}
},

//初期化
init:function(){
var roll = $('._rollParent');
for ( i=0;i {
var cookieName = roll.eq(i).find('._scrollNext').attr('data-pr') "_lifedu_rollCur" ;
var oStr = $.cookie(_scroll.config.ckname) || '{}';
var json = eval('(' oStr ')');
var cur = 0;
var page = 0;
var rollPar = roll.eq(i).find('._rollPar');
roll.eq(i).find('._scrollPrev').addClass('disabled ') ;
roll.eq(i).find('._rollSe').scrollTo(rollPar.eq(cur),50);
roll.eq(i).find('._rollPageSe') .find ('_rollpage').removeClass('ac').eq(page).addClass('ac');
//cookie
json.cur = cur;
json.page = page ;
var data = JsonToStr(json);
$.cookie(cookieName,data,_scroll.config.ckoptions);
}
},

_p : {},
//前処理
_pre:function(o){
_scroll.config.ckname = $(o).attr('data-pr') "_lifedu_rollCur";
_scroll._p.rollFrequency = parseInt($(o).attr('data-frequency'));
_scroll._p.rollSe = $(o).parents('._rollParent').find('._rollSe');スクロール領域
_scroll._p.rollPar = _scroll._p.rollSe.find('._rollPar');
_scroll._p.rlen = _scroll._p.rollPar.length;
//ページ番号領域
_scroll._p.rollPageSe = $(o).parents('._rollParent').find('._rollPageSe');
_scroll._p.rollPageLen = _scroll._p.rollPageSe.find('._rollpage ') .length;
},

//下にスクロール
next:function(o){
_scroll._pre(o);
var oStr = $.cookie( _scroll.config.ckname) || '{}';
var json = eval('(' oStr ')');
var last = _scroll._p.rlen - 1; _scroll. _p.rollFrequency;
var cur = parseInt(json.cur) 0 ; //現在のスクロール要素インデックス
var page = parseInt(json.page) || 現在のページ番号🎜> if (cur n < last){
cur = n;
ページ ;
}else if(cur == last){
return;
}else{
cur = last ;
page = _scroll._p.rollPageLen - 1;
}
//最後のページの場合 addClass 'disabled';
$(o).parents('._rollParent'). find(' ._scrollPrev').removeClass('disabled');
if(page == _scroll._p.rollPageLen - 1) {
$(o).addClass('disabled');
}else {
$(o).removeClass('disabled');
}
//scroll
_scroll._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur), 500);
_scroll.goPage(page);
//Cookie を書き込みます
json.cur = cur;
json.page = page;
var data = JsonToStr(json);
$.cookie(_scroll.config.ckname,data,_scroll.config.ckoptions);
},

//上にスクロール
prev:function(o){
/ /lg ('prev');
_scroll._pre(o);
var oStr = $.cookie(_scroll.config.ckname) ||';  
var json = eval('(' oStr ')');
var cur = parseInt(json.cur) || 0 ;  //当前滚動元素インデックス
var page = parseInt(json.page) || 0 ; //当前页码
var n = _scroll._p.rollFrequency;

if(cur-n > 0){
if(cur == _scroll._p.rlen - 1){
cur -= 2*n-1;
}else {
cur -= n;
}
if(cur page- -; 

}else if(cur == 0){
return;
}else {
cur = 0;
page = 0;
}
//最初のページの場合 addClass 'disabled';
$(o).parents('._rollParent').find('._scrollNext').removeClass('disabled');
if(page == 0) {
$(o).addClass('disabled');
} else {
$(o).removeClass('disabled');
}
//scroll
_scroll ._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur),500);
_scroll.goPage(page);
//写入cookie
json.cur = cur;
json.page = page;
var data = JsonToStr(json);
$.cookie(_scroll.config.ckname,data,_scroll.config.ckoptions);
},
goPage : function(p){
//lg(p);
if(_scroll._p.rollPageSe.length != 0){
_scroll._p.rollPageSe.find('._rollpage').removeClass ('ac').eq(p).addClass('ac');
}
}
}