ホームページ  >  記事  >  バックエンド開発  >  jQuery は下にスクロールして、コンテンツを瞬時に読み込むウォーターフォール フロー効果を実現します。jQuery は下にスクロールします_PHP チュートリアル

jQuery は下にスクロールして、コンテンツを瞬時に読み込むウォーターフォール フロー効果を実現します。jQuery は下にスクロールします_PHP チュートリアル

WBOY
WBOYオリジナル
2016-07-12 09:01:19760ブラウズ

jQuery は下にスクロールしてコンテンツを即座にロードし、ウォーターフォール フロー効果を実現します。jQuery は下にスクロールします

スクロール バーを引き下げるか、マウス ホイールをページの一番下までスクロールすると、新しいコンテンツが動的に即座にロードされます。

バックグラウンドではjsonを使用してデータを送信しており、サンプルプログラムではサンプル配列のみを記述しています。データには 2 つの属性が設定されているだけなので、実際のアプリケーションに応じて書き換える必要があります。

このページは ul li をコンテナとして使用し、各 li は列を表します

リーリー

JSコード

リーリー

コードの一部を共有しましょう: PHP Jquery と ajax を組み合わせて、ドロップダウンとフェードアウトのウォーターフォール フロー効果を実現しています

私のスタイル、これ以上ナンセンスではありません。興味のある友人は以下のコードを直接読むことができます:

フロントデスク:

リーリー

バックステージ:

リーリー

js:

リーリー

上記のコードは、ドロップダウンとフェードアウトのウォーターフォール フロー効果を実現するために PHP、Jquery、および ajax を紹介する 2 つの部分に分かれています。コードは比較的単純であり、バグがある場合は報告してください。 Bangkejia の編集者ができるだけ早くご連絡いたします。ありがとう!

興味があるかもしれない記事:

  • シンプルで使いやすいjQueryバージョンの模倣Sina Weiboのスクロールダウンエフェクト(デモ付き)
  • jQueryウォーターフォールのフローティングレイアウト(1)(遅延AJAX読み込み画像)
  • jQueryウォーターフォールフロー絶対配置レイアウト (2) (画像の遅延 AJAX 読み込み)
  • jQuery 製品断続的なスクロールダウンエフェクトコアコード
  • PHP は Jquery と ajax を組み合わせてウォーターフォール フローの特殊効果を実現します

www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/1089586.html技術記事 jQuery が下にスクロールしてコンテンツを即座にロードすることによって実現されるウォーターフォール フロー効果。jQuery が下にスクロールしてスクロール バーを引き下げたり、マウス ホイールをページの一番下までスクロールすると、新しいコンテンツが動的かつ即座にロードされます。 バックステージ使用...
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。