この記事では、画像のフェードインとフェードアウトを実現するためのjsの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 分析プロセス:1. 最大の親要素に複数の画像を追加し、最初の画像の透明度を1に設定します。不透明度: 1 残りの画像の透明度は 0 です。 2. 各画像を取得し、レベル サイズを 4 から 0 まで順番に設定して、異なるレベルを動的に設定します。 Setz_index:関数(){ for(var i=0;i<this.Photo.length;i++){ インデックス=i; this.Photo[i].style.zIndex =this.Photo.length-i-1; } }, 3. 画像の表示方法を時計回りまたは反時計回りの 2 通りに設定します。画像が変わると、対応するドットも変わります。表示される画像は最高レベルで透明度が 1 ですが、残りの画像は透明度が 0 で、対応する小さな点の色がピンク色に変わります。 アニメーションzindex:function(math,count){ for(var i=0;i<count;i++){ for(var k=0;k<this.Photo.length;k++) { //コンソール.log(1); var index = parseInt (this.Photo[k].style.zIndex); //43210 04321 10432 if(math=="n"){ index++; // ドットの色が左から右に変わります if(index ==this.Photo.length){ インデックス=0; this.Photo[k].style.opacity =0; this.Crclelist[k].style.background="#fff"; } if(index==this.Photo.length-1){ this.Photo[k].style.opacity= 1; this.Crclelist[k].style.background="ピンク"; this.Savecolor= this.Crclelist[k]; } } それ以外{ index--; // ドットの色が右から左に変わります if(index==-1){ インデックス=this.Photo.length-1; } if(index==this.Photo.length-1){ this.Photo[k].style.opacity= 1; this.Crclelist[k].style.background="ピンク"; this.Savecolor= this.Crclelist[k]; } if(index==this.Photo.length-2){ this.Photo[k].style.opacity =0; this.Crclelist[k].style.background="#fff"; } } this.Photo[k].style.zIndex =インデックス; } } }, 4. デフォルト値を設定して、最初のドットの色をピンクにします。マウスが最大の親要素にスライドすると、画像の回転が停止します。マウスが小さなドットにスライドすると、現在のドットの左から入る場合と右から入る場合の 2 つの状況に分かれます。 Moren_set:関数(){ var _this_ は、次のようになります。 that.Crclelist[0].style.background="ピンク"; that.Savecolor =that.Crclelist[0]; that.Bigblock.onmouseenter=関数(){ // コンソールログ(1); window.cancelAnimationFrame(glider.Timeset); }; that.Bigblock.onmouseleave=関数(){ グライダー.タイムライン(); } //ポイントイベント、画像の変化に従う for(var i=0;i<that.Crclelist.length;i++){ that.Crclelist[i].index=i; that.Crclelist[i].onmouseenter =function(){ var oldindex=that.Savecolor.index; var newindex=this.index; //マウスがスライドするドットのインデックス。これは現在のドットのスライド イベントを参照します// console.log(newindex); if(newindex -oldindex >0) { //現在のドットの右から入力します var ri=newindex -oldindex; // コンソールログ(ri); var le = that.Crclelist.length-ri; // コンソールログ(le); if(ri<=le){ console.log("右へ",ri); that.Animatezindex("n",ri); } もしも(ri>le){ console.log("左へ",le); that.Animatezindex("s",le); } } そうでない場合 (新しいインデックス - 古いインデックス < 0) { var ri1=Math.abs(newindex-oldindex); //絶対値を取得 var le1=that.Crclelist.length-ri1; ri1<=le1の場合{ console.log("左", ri1); that.Animatezindex("s",ri1); } ri1>le1の場合{ console.log("right", le1); that.Animatezindex("n",le1); } } } } } 5. 時間に応じて画像の回転を変更する回転イベントを設定します。 タイムライン:function(){ var nowtime = new Date().getTime(); if((nowtime - glider.Oldtime) >= glider.TimeDely ){ glider.Oldtime =nowtime; glider.Animatezindex("n",1); //右に変更します} //setTimeout メソッドと setInterval メソッドを使用して、スクリプトにアニメーションを実装できます。 // ただし、これは十分にスムーズではない可能性があり、余分なリソースを消費することになります。 //requestAnimationFrame メソッドは、アニメーションを再サンプリングしてループ再生するようにブラウザに通知するために使用されます。 /*アニメーションフレームをキャンセル cancelAnimationFrame メソッドは、以前にスケジュールされたアニメーション フレームの更新要求をキャンセルするために使用されます。 */ glider.Timeset = window.requestAnimationFrame(glider.Timelines); } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MyISAMとInnoDBの違いについてお話しましょう
>>: 単一マシン上での Tomcat の複数インスタンスの実装
ページ内にはjs、cssなどの外部ファイルが導入されており、外部ファイルのエンコードが現在のページフ...
最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...
実装のアイデア:まず、アラーム情報にはitemidが必要です。これは前提条件です。情報に渡されるパラ...
スーパーバイザー紹介Supervisor は、Python で開発されたクライアント/サーバー サー...
目次1. ACIDの特性トランザクション制御構文3. トランザクション同時実行例外1. ダーティリー...
BGCOLOR 属性を使用して、行の背景色を設定できます。基本的な構文<TR BGcolor...
最近の製品テストでは、同時呼び出し数が 10 未満の場合に応答時間が 100 ミリ秒以内に維持できな...
JavaScript厳密モードが 8 進数をサポートしていないという問題に関して、まず、 Java...
ページ分割されたクエリを実行するには: 1. MySQL の場合、サブクエリと結合の使用は推奨されま...
目次Prometheusはエクスポーターを介してMySQLを監視し、Grafanaチャートで表示しま...
1. インストールプロセスMySQL バージョン: 5.7.18 1. my.ini ファイル(簡易...
序文:親コンポーネントと子コンポーネント間でデータを渡す場合、通常は props と emittin...
1: アドレス書き換えとアドレス転送の意味を理解する。アドレス書き換えとアドレス転送は異なる...
目次1. 元の値と参照値2. インスタンス3. 範囲1. 元の値と参照値6 つの単純なデータ型の値は...
目次1. シナリオ2. サンドボックスの基本機能3. iframeの実装4. Webワーカーの実装5...