オンラインビデオの説明に従って私が実現した写真の壁のレンダリングを紹介しましょう。
最終的な効果は次のとおりです。
•画像がクリックされると、写真は中央の領域に移動してズームインします。画像がクリックされると、前面と背面が表示されます。
•特定の画像がクリックされると、すべての画像の位置がランダムに並べ替えられます
•コントロールボタンをクリックすると、対応する画像が中央に表示され、コントロールボタンが対応するスタイルが変更されます。コントロールボタンが連続してクリックされると、写真はボタンをクリックするだけで前面と背面側を切り替えます
下の図に示すように、効果全体のVCD分解：
コンピューターが理解できる方法でケースを分解します。
•ビジョンの表示：HTML + CSS Basic Interfaceテンプレート
•コントローラー：JavaScriptコンテンツ処理、イベント処理
•データデータ：data.jsは必要ありません、理解するのに役立ちます
データデータは非常に一般的に使用されています。コンテンツをビュー、つまりHTMLに書く場合、コンテンツを変更するときはHTMLを変更する必要がありますが、VCDを使用する場合は、データパーツを変更するだけです。同時に、一般的なデータ部分は背景によって生成されるため、このような代替品の方が便利です。この場合のポスターはすべて、テンプレートとデータによって生成されます。
セクションを表示します
効果領域は、次の3つの部分に分解されます。
•現在のポスターエリア
水平および垂直中心
<コントロールバーボタンで表示および反転させることができます>
•左および左の保管エリア
<現在のポスター領域>で左右の領域に分割します>
他のポスターを保存することです
各ポスターはランダムに配置され、角度が付けられています
•コントロールバーエリア
対応するポスターを制御して表示します
フリップトグル<現在のディスプレイポスター>前面と背面
実装されたHTMLコードは次のとおりです。
<body onselectStart = 'return false;'> <！ - ページのテキストが選択されないように - > <！ - 2。テンプレート文字列としてビューを書き換えます - > <div id = "wrap"> <！ - div.photoは翻訳と回転に責任があります - > <div onclick = "ターン（This）前面と背面をひっくり返す - > <div> <p> <img src = "photo/{{img}}"> </p> <p> {{caption}}} </p> </div> <div> <p> {{desc}}}} </p> </div> div> div> </div> </div> </div> </div> </div>ここでは、{{img}}、{{{caption}}、および{{desc}}はテンプレート文字列であり、データ部分は対応しますが、後で置き換えられます。
ビューパーツのスタイルは次のとおりです。
<style type = "text/css"> *{padding：0;マージン：0; } body {background-color：#ffff;色：＃555;フォントファミリー：「Avenir Next」、「Lantinghei SC」;フォントサイズ：14px; -moz-font-smoothing：antialiased; -webkit-font-smoothing：antialiased;/*font smooth*/} .wrap {//画像領域は体の幅の垂直中心です：100％;高さ：900px;位置：絶対; /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- top:50%;マージントップ：-300px; /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- /*各ポスターは、上部と左を使用してランダムに配置されているため、絶対に位置を設定します*/位置：絶対; z-index：1; Box-Shadow：0 0 1PX RGBA（0,0,0、.01）; /*変換：rotatey（30deg）;*/ -moz -transition：すべて.6s; /*ポスターを動かしてアニメーション効果を生成します*/ -WebKit -Transition：すべて.6S; } .photo .side {width：100％;高さ：100％;バックグラウンドカラー：#eee;位置：絶対;上：0;右：0;パディング：20px;ボックスサイズ：ボーダーボックス; } .photo .side-front .image {width：100％;高さ：250px;ラインハイト：250px;オーバーフロー：隠し; } .photo .side-front .image img {width：100％; } .photo .side-front .caption {text-align：center;フォントサイズ：16px;ラインハイト：50px; } .photo .side-back .desc {color：＃666;フォントサイズ：14px; Line-Height：1.5em; } /*現在選択されているポスタースタイル* /.photo_center { /*---垂直センタリング方法を実装します1つ左：50％;トップ：50％;マージン左：-130px;マージントップ：-160px; *//*垂直センタリング方法2*/ top：0を実装します。下：0;左：0;右：0;マージン：自動; z-index：999; //現在選択されているポスターが他のポスターでカバーされないようにします}/*フリップの責任*/.photo-wrap {position：absolute;幅：100％;高さ：100％; -moz-transform-style：perserve-3d; -webkit-transform-style：preserve-3d;/*内部の要素が3d*/変換スタイルの効果をサポートするようにします：preserve-3d;/*この文のため、Firefoxの背面は表示できません*/ -webkit-transition：すべて1s; -moz-transition：すべて1s;遷移：すべて1S; } .photo-wrap .side {-moz-backface-Visibility：hidden; //画面が画面に面していないときに非表示バックフェイスバイズ性：非表示; } .photo-wrap .side-front {-moz-transform：rotatey（0deg）; -webkit-transform：rotatey（0deg）;変換：Rotatey（0DEG）; } .photo-wrap .side-back {-moz-transform：rotatey（180deg）; -webkit-transform：rotatey（180deg）;変換：rotatey（180deg）; } .photo-front .photo-wrap {-moz-transform：rotatey（0deg）; -webkit-transform：rotatey（0deg）;変換：Rotatey（0DEG）; } .photo-back .photo-wrap {-moz-transform：rotatey（180deg）; -webkit-transform：rotatey（180deg）;変換：rotatey（180deg）; } /*コントロールボタンスタイル* / .nav {width：40％;高さ：30px; Line-Height：30px;位置：絶対;左：30％;下：20px; Z-Index：999; /*background-color：#fff;*/ text-align：center; } /*通常のスタイル* / .nav .i {width：30px;高さ：30px;ディスプレイ：インラインブロック。カーソル：ポインター;バックグラウンドカラー：#aaa;テキストアライグ：センター;ボーダーラジウス：50％; -moz-transform：スケール（.48）; -webkit-transform：スケール（.48）;変換：スケール（.48）; -webkit-transition：すべて1s; -moz-transition：すべて1s; } .nav .i：{} /*現在選択されているスタイル* / .nav .i_current {-moz -transform：scale（1）; -webkit-transform：スケール（1）; } .nav .i_current：after {ofacity：1; } /*back {-moz-transform：rotatey（-180deg）; -webkit-transform：rotatey（-180deg）;バックグラウンドカラー：＃555; }/*スタイルの最適化、*/ .photo {/*以下の定義は、画像の突然のフラッシュを排除することです*/左：50％;トップ：50％;マージン：-160px 0 0 -130px; } .photo-wrap {-moz-transform-origin：0％50％; -webkit-transform-origin：0％50％; } .photo-front .photo-wrap {-moz-transform：translate（0px、0px）rotatey（0deg）; -webkit-transform：翻訳（0px、0px）rotatey（0deg）; } .photo-back .photo-wrap {-moz-transform：translate（260px、0px）rotatey（180deg）; -webkit-transform：translate（260px、0px）rotatey（180deg）; }スタイルのいくつかの重要な部分を次に示します。
場合の設定：-WebKit-Perspection：800px;
これを設定してから、Rotatey（45Deg）を設定する効果を確認できます。 -webkit -transformが設定されていない場合、回転効果は表示されません。写真の回転は、飛行機で回転するだけです。セットが小さすぎる場合、効果は次のとおりです。
div.photoは画像の翻訳と回転を担当し、div.photo-wrapは3Dフリップ（フロントおよびバックスイッチング）を担当します。内部の要素を3D効果をサポートできるようにするために、div.photo-wrap用のwebkit-transform-3dを設定します。
.photo-wrap .side style -webkit-backface-visibility：hidden;この文の目的は、要素が画面に面していないときに隠すことです。
画像の動きとフリップアニメーション効果を発揮するために、.photo-wrapのwebkit-transitionを設定します。以下の遷移の説明を見てみましょう。
ナビゲーションバースタイル
/*通常のスタイル*/ .nav .i {width：30px;高さ：30px;ディスプレイ：インラインブロック。カーソル：ポインター;バックグラウンドカラー：#aaa;テキストアライグ：センター;ボーダーラジウス：50％; -moz-transform：スケール（.48）; -webkit-transform：スケール（.48）;変換：スケール（.48）; -webkit-transition：すべて1s; -moz-transition：すべて1s; } /*現在選択されているスタイル* / .nav .i_current {-moz -transform：scale（1）; -webkit-transform：スケール（1）; } .nav .i_current：after {ofacity：1; } /*back style* / .nav .i_back {-moz-transform：rotatey（-180deg）; -webkit-transform：rotatey（-180deg）;バックグラウンドカラー：＃555; }ナビゲーションバーの分析図：
ナビゲーションバーのボタンも前面と背面に分かれています。前面と背面の効果を区別するために、それらは異なる背景色を持つように設定されており、同時に、フリップ効果は通常のボタンを減らすように設定されています - 変換：スケール（.48）、およびボタンが選択されたとき、スケール（1）。ボタンからズームインして出入りする理由は、現在のボタンが選択されたときに全体的なスタイルが破壊されるかどうかを正確に知ることです。
すべての基本的なスタイルが設定された後、いくつかの最適化が効果を発揮します。前と背面を切り替えるときに、ドアのように写真をわずかにオフセットするようにするために、次のスタイルを追加できます。
/*スタイルの最適化、*/ .photo {/*以下の定義は、画像の突然のフラッシュを排除することです*/左：50％;トップ：50％;マージン：-160px 0 0 -130px; } .photo-wrap {-moz-transform-origin：0％50％; -webkit-transform-origin：0％50％; } .photo-front .photo-wrap {-moz-transform：translate（0px、0px）rotatey（0deg）; -webkit-transform：翻訳（0px、0px）rotatey（0deg）; } .photo-back .photo-wrap {-moz-transform：translate（260px、0px）rotatey（180deg）; -webkit-transform：translate（260px、0px）rotatey（180deg）; }データセクション
データは主にdata.jsで記述されています。データアレイは、22枚の写真の情報を保存するためにdata.jsで定義されています。データアレイの出力構造は次のとおりです。
データに保存されている各オブジェクトには、キャプション、DESC、IMGの3つの属性が含まれています。データに保存されている各オブジェクトの内容は、次のように出力されます。データ部分は、主にテンプレート内の文字列を置き換えるために使用されます。
data.jsの内容は次のとおりです。
var data = []; var datastr = '1。写真1 <br>/<br>/緑の野菜<br>/<br>/<br>/2。写真2 <br>/<br>/写真2 <br>/<br>/<br>/3。写真3 <br>/<br>/<br>/<br>/4。写真4 <br>/<br>/<br>/<br>/4。写真4 <br>/<br>/<br>/5。写真5 <br>/<br>/<br>/<br>/<br>/6。超かわいい小さなクマのおもちゃ<br>/<br>/超かわいい小さなクマのおもちゃ<br>/<br>/>/<br>/<br>/7、写真7 <br>/<br>/<br>/<br>/8、写真8 <br>/<br>/9、写真9 <br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br> 10 <br>/<br>/<br>/11、写真11 <br>/<br>/<br>/<br>/12、写真12 <br>/<br>/<br>//12 <br>/<br>/<br>/13、写真13 <br>/<br>/<br>/<br>/14、写真14 <br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br> 15 <br>/<br>/<br>/<br>/15、写真15 <br>/<br>/<br>/<br>/16、写真16 <br>/<br>/<br>/<br>/17、写真17 <br>/<br>/<br>/17、写真17 <br>/<br>/<br>/<br>/<br>/17、写真17 <br>/<br>/<br>/<br>/17、写真17 <br>/<br>/<br>/<br>/17、写真17 <br>/<br>/<br>/<br>/18、写真18 <br>/<br>/19、写真19 <br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br> 20 <br>/<br>/<br>/写真20 <br>/<br>/21、写真21 <br>/<br>/<br>/<br>/<br>/22、写真22 <br>/<br>/'; //次のコードは、データアレイのコンテンツをデータアレイvar d = datastr.split（' <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> i ++）{var c = d [i] .split（ '<br> <br>'）; data.push（{img： 'img'+（i+1）+'。jpg'、キャプション：c [0] .split（ '、'）[1]、desc：c [1]}）;}VCD分解制御制御
•すべてのポスターコンテンツを出力します（テンプレート +データを表示）
•位置配分制御（中央位置、両側の位置）
•コントロールバーの出力と制御（スイッチ、フリップ）
すべてのポスターを出力し、データ配列を繰り返し、コンテンツをテンプレートに入力します。
// 4。すべてのポスターを出力var data = data;関数addphotos（）{var template = $（ '＃wrap'）。html（）; var html = []; var nav = []; for（s in data）{var _html = template.replace（ '{{index}}'、s）.replace（ '{{img}}}'、data [s] .img）.replace（ '{{{caption}}}'、data [s] .caption） .replace（ '{{desc}}'、data [s] .desc）; html.push（_html）; //各ポスターには、対応するボタンnav.push（ '<span id = "nav _'+s+'" onclick = "turn（this）"> </span>'）; } //トラバーサルhtml.push（ '<div>'+nav.join（ ''）+'</div>'）の後に書き戻す$（ '＃wrap'）。html（html.join（ ''））; rsort（random（[0、data.length]））; }ポスターソート、分析図は次のとおりです。
左右のパーティションのポスターをソートするときは、まず次のように左右のパーティションのポスターの位置を分析します。
乱数を使用して、現在のポスターの左と上位の値を生成する
//ランダムな値を作成し、値の範囲をサポートします。Random（[min、max]）;関数ランダム（範囲）{var max = math.max（range [0]、range [1]）; var min = math.min（range [0]、range [1]）; var diff = max-min; var number = math.ceil（math.random（）*diff + min）;返品番号。 } // 6。左右のパーティションの範囲を計算{左：{x：[min、max]、y [min、max]}、右{x：[min、max]、y：[min、max]}} function range（）{var ran = {左：{x：[]、y：[]} var wrap = {w：$（ '＃wrap'）。width（）、// w：600、h：$（ '＃wrap'）。height（）} var photo = {w：$（ '。写真'）[0] .clientwidth、h：$（ '。写真'）[0] .clientheight} ran.xx = [0 -0 -photo.w.w。 ran.left.y = [0 -photo.h、wrap.h]; ran.right.x = [wrap.w/2 + photo.w/2、wrap.w + photo.w]; ran.right.y = ran.left.y; Return RAN; }次に、ポスターを並べ替えます
//5.ポスター関数rsort（n）{var _photo = $（ '。写真'）; var photos = []; for（var i = 0; i <_photo.length; i ++）{_photo [i] .classname = _photo [i] .classname.replace（// s*photo_center/s*/、 ''）; _photo [i] .classname = _photo [i] .classname.replace（// s*photo-front/s*/、 ''）; _photo [i] .classname = _photo [i] .classname.replace（// s*photo-front/s*/、 ''）; _photo [i] .classname = _photo [i] .classname = _photo [i] .classname.replace（// s*photo-back/s*/、 ''）; // Photo-FrontとPhoto-Backの両方が上に置き換えられているため、_photo [i] .classname += 'photo-front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .style ['-Moz-Transform'] = _photo [i] .style ['transform'] = _photo [i] .style ['-webkit-transform'] = '回転（0DEG）スケール（1.3）'; photos.push（_photo [i]）; } // var photo_center = $（ '＃photo _'+n）[0]; var photo_center = document.getElementById（ 'photo _'+n）; var newclass = photo_center.classname + 'photo_center'; //console.log(photo_center.attr('class '））; photo_center = photos.splice（n、1）[0]; //photo_center.classname = newclass; $（ '＃photo _'+n）.attr（ 'class'、newclass）; //残りのポスターを2つの部分に分割しますvar photos_left = photos.splice（0、math.ceil（photos.length/2））; var photos_right = photos; var Ranges = range（）; //左パーティションソート（s in photos_left）{var photo = photos_left [s]; photo.style.left = random（ranges.left.x） + 'px'; photo.style.top = random（ranges.left.y） + 'px'; photo.style ['-Moz-Transform'] = photo.style ['transform'] = photo.style [' - webkit-transform'] = 'Rotate（'+random（[-150,150]）+'deg）スケール（1）'; } //右のパーティションソート（写真in photos_right）{var photo = photos_right [s]; photo.style.left = random（ranges.right.x） + 'px'; photo.style.top = random（ranges.right.y） + 'px'; photo.style ['-Moz-Transform'] = photo.style ['transform'] = photo.style [' - webkit-transform'] = photo.style [' - webkit-transform'] = photo.style ['-webkit-transform'] = 'rotate（'+random（ '+landom' deg） '）'） } //コントロールボタン処理var navs = $（ '。i'）; for（var i = 0; i <navs.length; i ++）{navs [i] .classname = navs [i] .classname.replace（// s*i_current/s*/、 ''）; navs [i] .classname = navs [i] .classname.replace（// s*i_back/s*/、 ''）; } // i_current style $（ '＃nav _' +n）[0] .classname += 'i_current'; }ポスターの前面と背面の切り替え効果と、コントロールボタンの切り替え効果：
関数ターン（Elem）{var cls = elem.classname; var n = elem.id.split（ '_'）[1]; if（！（/photo_center/.test（cls）））{rsort（n）; } // ClassNameは上記のIFステートメントの実行後に変更されます。 cls = cs.classname; if（/photo-front/.test（cls））{cls = cls.replace（/photo-front/、 'photo-back'）; $（ '＃nav _' +n）[0] .classname += 'i_back'; } else {cls = cls.Replace（/photo-back/、 'photo-front'）$（ '＃nav _'+n）[0] .classname = $（ '＃nav _'+n）[0] .classname.replace（// s*i_back/s*/、 '）; } cs.classname = cls; }Rsort（n）のNに基づいて現在表示されているポスターがどのポスターであるかを理解できます。また、現在選択しているボタンがどのボタンであるかもわかります。
上記は、対応する効果分析です。
要約：
ケースを分析するためのアイデアと方法：
•モジュール分析方法
•VCD分析方法
いくつかの新しいCSS効果
•3Dビュー位置設定と3Dサブ要素のサポート
•目に見えないときに隠します
•CSS回転（Y軸）と変位を使用します
•CSSスイッチングアニメーション
フロントエンドスクリプトスキル
•文字列交換用のシンプルなテンプレート関数
•範囲に応じて乱数を取得します
•スクリプトを使用して、要素のクラス名と特定のスタイル属性を切り替えます
実装プロセス中に、私が遭遇した問題は、画像をひっくり返すと、逆側がFirefoxに隠さないことでした。つまり、次のコードに問題があり、長い間チェックされてきました。
.photo-wrap .side {-moz-backface-visibility：hidden; -webkit-backface-visibility：hidden;バックフェイス視察：非表示;}それは次のことが判明しました：私はTransform-Style：Preserve-3dを逃しました。したがって、ブラウザの互換性がある場合は、プレフィックスなしでスタイルを書くことを忘れないでください
.photo-wrap {position：absolute;幅：100％;高さ：100％; -moz-transform-style：perserve-3d; -webkit-transform-style：preserve-3d;/*内部の要素が3d*/<span style = "color：＃cc0000;"> preserve-3d;/*firefoxの背面を表示できない*/</</</</webkit-transition：すべて1S; -moz-transition：すべて1s;遷移：すべて1S; }最後に、完全なJSコードが添付されています。
<script type = "text/javascript"> //ランダムな値をランダムに生成し、値の範囲をサポートします（[min、max]）;関数ランダム（範囲）{var max = math.max（range [0]、range [1]）; var min = math.min（range [0]、range [1]）; var diff = max-min; var number = math.ceil（math.random（）*diff + min）;返品番号。 } // 4。すべてのポスターを出力var data = data;関数addphotos（）{var template = $（ '＃wrap'）。html（）; var html = []; var nav = []; for（s in data）{var _html = template.replace（ '{{index}}'、s）.replace（ '{{img}}}'、data [s] .img）.replace（ '{{{caption}}}'、data [s] .caption） .replace（ '{{desc}}'、data [s] .desc）; html.push（_html）; //各ポスターには、対応するボタンnav.push（ '<span id = "nav _'+s+'" onclick = "turn（this）"> </span>'）; } html.push（ '<div>'+nav.join（ ''）+'</div>'）; $（ '＃wrap'）。html（html.join（ ''））; rsort（random（[0、data.length]））; } addphotos（）// 6。左右のパーティションの範囲を計算{左：{x：[min、max]、y [min、max]}、右{x：[min、max]、y：[min、max]}} function range（）{var ran = {左：{x：[]、y：[]} var wrap = {w：$（ '＃wrap'）。width（）、// w：600、h：$（ '＃wrap'）。height（）} var photo = {w：$（ '。写真'）[0] .clientwidth、h：$（ '。写真'）[0] .clientheight} ran.xx = [0 -0 -photo.w.w。 ran.left.y = [0 -photo.h、wrap.h]; ran.right.x = [wrap.w/2 + photo.w/2、wrap.w + photo.w]; ran.right.y = ran.left.y; Return RAN; } // 5。ポスター関数rsort（n）{var _photo = $（ '。写真'）; var photos = []; for（var i = 0; i <_photo.length; i ++）{_photo [i] .classname = _photo [i] .classname.replace（// s*photo_center/s*/、 ''）; _photo [i] .classname = _photo [i] .classname.replace（// s*photo-front/s*/、 ''）; _photo [i] .classname = _photo [i] .classname.replace（// s*photo-back/s*/、 ''）; _photo [i] .classname = _photo [i] .classname.replace（// s*photo-back/s*/、 ''）; //上記はフォトフロントとフォトバックの両方を置き換えたため、_photo [i] .classname += 'photo-front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .style ['-Moz-Transform'] = _photo [i] .style ['transform'] = _photo [i] .style ['-webkit-transform'] = '回転（0DEG）スケール（1.3）'; photos.push（_photo [i]）; } // var photo_center = $（ '＃photo _'+n）[0]; var photo_center = document.getElementById（ 'photo _'+n）; var newclass = photo_center.classname + 'photo_center'; //console.log(photo_center.attr('class '））; photo_center = photos.splice（n、1）[0]; //photo_center.classname = newclass; $（ '＃photo _'+n）.attr（ 'class'、newclass）; //残りのポスターを2つの部分に分割するvar photos_left = photos.splice（0、math.ceil（photos.length/2））; var photos_right = photos; var Ranges = range（）; //左パーティションソート（s in photos_left）{var photo = photos_left [s]; photo.style.left = random（ranges.left.x） + 'px'; photo.style.top = random（ranges.left.y） + 'px'; photo.style ['-Moz-Transform'] = photo.style ['transform'] = photo.style [' - webkit-transform'] = 'Rotate（'+random（[-150,150]）+'deg）スケール（1）'; } //右のパーティションソート（写真のs）{var photo = photos_right [s]; photo.style.left = random（ranges.right.x） + 'px'; photo.style.top = random（ranges.right.y） + 'px'; photo.style ['-Moz-Transform'] = photo.style ['transform'] = photo.style ['-webkit-transform'] = 'Rotate（'+random（[-100,100]）+'deg）スケール（1）'; } //コントロールボタン処理var navs = $（ '。i'）; for（var i = 0; i <navs.length; i ++）{navs [i] .classname = navs [i] .classname.replace（// s*i_current/s*/、 ''）; navs [i] .classname = navs [i] .classname.replace（// s*i_back/s*/、 ''）; } // i_current style $（ '＃nav _' +n）[0] .classname += 'i_current'; }関数ターン（ELEM）{var cls = elem.classname; var n = elem.id.split（ '_'）[1]; if（！（/photo_center/.test（cls）））{rsort（n）; } //上記のifステートメントの実行後にクラス名が変更されます。これは、photo_center class var cs = $（ '＃photo _'+n）[0]; cls = cs.classname; if（/photo-front/.test（cls））{cls = cls.replace（/photo-front/、 'photo-back'）; $（ '＃nav _' +n）[0] .classname += 'i_back'; } else {cls = cls.Replace（/photo-back/、 'photo-front'）$（ '＃nav _'+n）[0] .classname = $（ '＃nav _'+n）[0] .classname.replace（// s*i_back/s*/、 '）; } cs.classname = cls; } </script>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。