コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery_jquery に基づく左右スクロールの実装コード

jQuery_jquery に基づく左右スクロールの実装コード

WBOY
リリース： 2016-05-16 18:14:53
オリジナル
1168 人が閲覧しました

2つのディビジョン。
div の幅は固定です。セカンダリ div に div を埋め込みます。これはデータ列です。

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



  • /li>
  • データ 2

  • データ 2

  • データ 2


右に移動
left
stylesheet
.box{
高さ: 93px;
left:0px; nowrap;
overflow:hidden;
position:relative /* 二次属性を追加せずにコンテンツを非表示にすることはできません*/
.box-li{
float: left; >高さ: 90px;
左:0px;
空白:nowrap;
両方; >width:100000px; /* IE のデータは時刻データを追加せずに自動的に折り返されます*/
white-space:nowrap
}
.box-li li{
margin-left:0px ;
margin-right:0px;
float: left;
width: 92px; $cur = 1; //表示ページを初期化します
var $i= 6; //ページごとの表示数
var $len = $('.box-li>ul> li').length; //リストの全長(数値)を計算します
var $pagecount = Math.ceil($len / $i) //表示ページ数を計算します
var $showbox = $(' .box ');
var $w = $('.box').width(); //表示領域の周囲の幅を取得します
var $pre = $('#pre'); var $next = $('#next');
//前方にスクロール
$pre.click(function () {
if (!$showbox.is(':animated')) { / /表示領域がアニメーション化されているかどうかを決定します
if ($cur == 1) { //最初のページでは、前方にスクロールしてもアクションはありません}
else {
$showbox.animate({
left: ' =' $w
}, 600) //左の値を変更して表示レイアウトを切り替えます
$cur--; //レイアウトが減少します
}
}
} );
//後方にスクロール
$next.click(function () {
if (!$showbox.is(':animated')) { //表示領域がアニメーション化されているかどうかを判断します
if ($cur == $pagecount) { //最後のページでは、後方にスクロールしても何も起こりません}
else {
$showbox.animate({
left: '-=' $w
}, 600); //左の値を変更して表示レイアウトを切り替えます
$cur; //レイアウト数が蓄積されます
}
}); });

関連ラベル：
左右滚动
ソース：php.cn
前の記事：JavaScript で正規表現を使用して複数のアイテムを照合し、各 item_javascript スキルでグループ化されたデータを取得する 次の記事：JavaScript文字列処理関数の使い方まとめ_JavaScriptスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
クリックしてスクロールすると div を非表示/表示します 検索アイコンをクリックすると表示され、ユーザーがクリックまたはスクロールすると非表示になる、非表示の検索フォームを作成したいと考えています。
から 2024-04-06 12:20:46
0
1
386
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート