簡易ウォーターフォールフローエフェクト（自作本体フォーム）_jquery

何もすることがないので、自分でウォーターフォール フローを書きました。スクリプトや Web ページを書くときの私の個人的な習慣は、他の人の結果を参照するだけで、他の人のコードをほとんど参照しないことです。推論するためにレビュー要素を使用することもあります。ソースコードを見るよりもコードを見てください。これが良い習慣なのかどうかはわかりません。途中の工程にかなりの時間がかかりましたが、自分が作ったものは今でも細部まで覚えています（もちろん後で必ず忘れますが）。本題に入ります:

ウォーターフォール フローの本体は、いくつかの ul タグです。新しく追加された要素は、現在の ul の高さに応じて、特定の ul の形式で選択的に挿入されます。
本体の形式は次のとおりです:

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

img />
anytext..


;img />

任意のテキスト/div>
;
• 任意のテキスト;/div>
  ....
  

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

.pics { float:left; マージン左: 10px; 、幅: 230px; 、マージン: 10px; 位置: 相対; ; } .pic {

幅:92%; マージン:0 自動;

フォントサイズ:180px;
}
.pic img {
width:100%;
margin: 0 auto; >.content {
width:92%;
padding-top:10px;
height:50px;
overflow:hidden;








コードをコピー


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


$(function(){
//alert($(window).height()); ブラウザの現在のウィンドウの表示領域の高さ
//alert($(document).height());現在のウィンドウのドキュメントalert($(document.body).height());
/ /ブラウザの現在のウィンドウのドキュメント本体の高さalert($(document.body).outerHeight(true));
//ブラウザの現在のウィンドウのドキュメント本文の高さの合計には、境界線のパディングマージンが含まれます。alert($(window).width ());
//ドキュメントの表示領域の幅ブラウザの現在のウィンドウalert($(document).width());
//ブラウザの現在のウィンドウのドキュメントオブジェクトの幅alert($(document.body).width()); 🎜>//ブラウザの現在のウィンドウのドキュメント本文の高さalert($(document.body).outerWidth(true));
//ブラウザの現在のウィンドウのドキュメント本文の幅の合計ブラウザには境界線のパディングマージンが含まれています
$(document).scroll(function(){
var pics=$(".pics");
var sc=$(document).scrollTop();
$(" #float").text(sc);
for(var i=0;ivar pic=pics.eq(i);ボトム =pic.offset().top pic.height();
if((sc $(window).height())>=bottom){
eval( "var word=" '"\ u' (Math .round(Math.random() * 20901) 19968).toString(16) '"');

var li="

" word "> }
} }); });

これは基本的に最も単純なウォーターフォール フローを実装しますが、スクリプトはメモリ消費、つまり無限ロードの問題を考慮していません。今は理解できていないので、後で改善します。
効果を見てみましょう:

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

4週間前 By DDD

Atomfall Guide：アイテムの場所、クエストガイド、およびヒント

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

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

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7653

15

CakePHP チュートリアル

1393

52

Steamのアカウント名の形式は何ですか

91

11

Win11 Activation Key Permanent

73

19

NYTミニクロスワードの回答

37

110

もっと見る