ホームページ ウェブフロントエンド jsチュートリアル カプセル化されたjqueryページスクロール(サンプルコード)_jquery

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

May 16, 2016 pm 05:14 PM
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');
}
}
}
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?

jQueryで要素の高さ属性を削除するにはどうすればよいですか? jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

jQuery を使用してすべての a タグのテキスト コンテンツを変更する

Wordでページをめくる方法 Wordでページをめくる方法 Mar 19, 2024 pm 07:22 PM

Wordでページをめくる方法

jQuery における eq の役割と応用シナリオを理解する jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery における eq の役割と応用シナリオを理解する

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?

See all articles