画像のフェードインとフェードアウト効果を実現する js

画像のフェードインとフェードアウト効果を実現する js

この記事では、画像のフェードインとフェードアウトを実現するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 画像カルーセルのフェードインとフェードアウト効果を実現するためのネイティブ js と jQuery
  • js でフェードインとフェードアウト効果を実現する方法
  • ネイティブjsはフェードインとフェードアウト効果を実装します
  • js を使用して、シンプルな画像のフェードインとフェードアウトの切り替え効果を実現します。
  • js フェードインとフェードアウト画像カルーセル効果コード共有
  • js フェードインとフェードアウトを制御するサンプルコード
  • JS を使用して画像の遅延読み込みとフェードイン/フェードアウト効果を実装する簡単な方法
  • jsは画像読み込みのフェードインとフェードアウト効果を実現します
  • フェードインとフェードアウトのカルーセル切り替え機能を実現する js
  • js モーション フレームワーク_画像のフェードインとフェードアウト効果を含む

<<:  MyISAMとInnoDBの違いについてお話しましょう

>>:  単一マシン上での Tomcat の複数インスタンスの実装

推薦する

外部ファイル(js/vbs/css)をインポートするときに文字化けを回避する方法

ページ内にはjs、cssなどの外部ファイルが導入されており、外部ファイルのエンコードが現在のページフ...

ウェブページにプレーヤーを埋め込む埋め込み要素の自動開始が false 無効

最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...

Zabbix は DingTalk のアラーム機能を画像付きで設定します

実装のアイデア:まず、アラーム情報にはitemidが必要です。これは前提条件です。情報に渡されるパラ...

Centos6.5 でのスーパーバイザーのアップグレード、インストール、および構成に関するチュートリアル

スーパーバイザー紹介Supervisor は、Python で開発されたクライアント/サーバー サー...

MySQL トランザクション制御フローと ACID 特性

目次1. ACIDの特性トランザクション制御構文3. トランザクション同時実行例外1. ダーティリー...

HTML テーブルタグチュートリアル (20): 行の背景色属性 BGCOLOR

BGCOLOR 属性を使用して、行の背景色を設定できます。基本的な構文<TR BGcolor...

MySQLのサブクエリユニオンの効率性についての簡単な説明と

最近の製品テストでは、同時呼び出し数が 10 未満の場合に応答時間が 100 ミリ秒以内に維持できな...

JavaScriptの厳密モードが8進数をサポートしていない問題の説明

JavaScript厳密モードが 8 進数をサポートしていないという問題に関して、まず、 Java...

MySQLがサブクエリと結合の使用を推奨しない理由

ページ分割されたクエリを実行するには: 1. MySQL の場合、サブクエリと結合の使用は推奨されま...

PrometheusはGrafanaディスプレイを使用してMySQLを監視します

目次Prometheusはエクスポーターを介してMySQLを監視し、Grafanaチャートで表示しま...

Windows に MySQL 5.7.18 の解凍バージョンをインストールするチュートリアル

1. インストールプロセスMySQL バージョン: 5.7.18 1. my.ini ファイル(簡易...

Vue3 における provide と inject の使用法と原則

序文:親コンポーネントと子コンポーネント間でデータを渡す場合、通常は props と emittin...

NginxにおけるRewriteのリダイレクト設定と実践の詳しい解説

1: アドレス書き換えとア​​ドレス転送の意味を理解する。アドレス書き換えとア​​ドレス転送は異なる...

JavaScript 上級プログラミング: 変数とスコープ

目次1. 元の値と参照値2. インスタンス3. 範囲1. 元の値と参照値6 つの単純なデータ型の値は...

JavaScript サンドボックスの探索

目次1. シナリオ2. サンドボックスの基本機能3. iframeの実装4. Webワーカーの実装5...