この記事では、画像のフェードインとフェードアウトを実現するための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 の複数インスタンスの実装
1. MySQL 5.6をインストールした後、正常に有効化できないMySQL の圧縮バージョンは、解...
目次Dockerとは展開する1. イメージをプルする2. 画像を表示する3. コンテナを実行する4....
HTML+CSS 1. WEB 標準と W3C の理解と知識<br /> タグを閉じ、小...
目次G2チャートについて使用テンプレートで使用される完全なコード (棒グラフ)世界地図を追加するG2...
JSONデータはHTMLページ上に表示されフォーマットされます1. 表示効果図説明:すべてのキー値は...
ページの公開名: #wrapper - ページの外側の端が全体のレイアウト幅を制御します#conta...
目次1. ブラウザのクッキーの値を取得する2. RGBを16進数に変換する3. クリップボードにコピ...
I. はじめに1: SSL証明書私のドメイン名は Tencent Cloud にあります。第 3 レ...
1 はじめにKong は単純な製品ではありません。この記事で言及されている Kong は主に Kon...
目次1. Tomcatを監視する方法2. Java独自の監視コマンド3. Tomcatのトラブルシュ...
1. 以前のバージョン yum 削除 docker docker-client docker-cli...
目次1. はじめに2. シナリオ3. 環境を整える3.1 環境変数の挿入4. 最後に1. はじめに一...
/******************** * キャラクターデバイスドライバー**********...
目次Dockerイメージのダウンロードmysqlとnacosを起動する独自のJavaプロジェクトを変...
前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...