スライド効果を実現するためのネイティブJavaScript

スライド効果を実現するためのネイティブJavaScript

ページ、特にホームページを作成するときは、通常、Web サイト全体の他のメイン ページにリンクできるナビゲーション バーを設計するか、Web サイトの紹介テキストの段落にこのページへのジャンプを含めます。通常、これらのジャンプ リンクに説明テキストを追加するには title 属性を使用しますが、スライド デモを作成することでユーザー エクスペリエンスを強化できます。ユーザーがマウスをリンクに移動するたびに、対応する画像のプレビューが下に表示されます。これにより、ページが美しくなるだけでなく、Web サイト全体のインタラクティブ性が大幅に向上します。一緒に美しいスライドショー スクリプトを作成してみましょう。

準備: スクリプトを作成する前に、以下に示すように、すべてのプレビュー効果を表示する画像を作成する必要があります。

インデックス.html

順序付きリストを作成し、いくつかのページリンクを追加します

<本文>
 <h1>簡単なアニメーション制作</h1>
 <p>リンクジャンプ先表示</p>
 <ol id="リスト">
 <li>
 <a href="list1.html" >まず</a>
 </li>
 <li>
 <a href="list2.html" >2番目</a>
 </li>
 <li>
 <a href="list3.html" >3番目</a>
 </li>
 </ol>
 <!-- 動的に追加された画像表示領域>-->
<script src="script.js"></script>
</本文>

スタイル.css

このナビゲーションバーにスタイルを追加する

オル{
 左パディング: 20px;
}
オルリ{
 表示: インライン;
 右マージン: 10px;
}
#ビュー{
 幅: 600ピクセル;
 高さ: 200px;
 位置: 絶対;
}
#スライドショー{
 幅: 200ピクセル;
 高さ: 200px;
 オーバーフロー: 非表示;
 位置: 相対的;
}

スクリプト

実装のアイデア:

スクリプトを作成する前に、考えを整理して、何をしたいのかを決めましょう。
1. プレビュー画像を表示するためのノードをいくつか作成する
2. aタグにonmouseoverイベントを追加する
3. アニメーション効果は、setTimeout() 関数と画像要素の左と上のオフセットの移動によって完成します (設定された属性を取得するときに、左と上の属性を整数に変換する必要があります)

/*共有負荷*/
関数addLoadEvent(fun){
 var oldLoad = window.onload;
 if(typeof oldLoad != "function"){
  ウィンドウのonload = 楽しい;
 }それ以外{
  window.onload = 関数(){
   古いロード();
   楽しい();
  }
 }
}

/*挿入後*/
関数 insertAfter(newNode,oldNode){
 var 親 = oldNode.parentNode;
 if(parent.lastChild == oldNode){
  親ノードに新しい子ノードを追加します。
 }それ以外{
  親ノードの前に新しいノードを挿入し、古いノードに次の兄弟を追加します。
 }
}

関数 show(){
 /* 下位互換性 */
 if(!document.getElementById) は false を返します。
 if(!document.getElementsByTagName) が false を返します。
 if(!document.createElement) は false を返します。

 /*リストのリストを取得する*/
 var リスト = document.getElementById("リスト");

 /*画像表示領域を作成する*/
 /*外側のdiv*/
 var div = document.createElement("div");
 div.setAttribute("id","スライドショー");
 /*画像*/
 var img = document.createElement("img");
 img.setAttribute("id","view");
 img.setAttribute("src","image.jpg");
 img.setAttribute("alt","画像プレビュー");
 /*div がリストの直後に来るように insertAfter() 関数を追加します*/
 div にリストを挿入します。
 div.appendChild(画像);

 /*イベントをバインド*/
 var a = list.getElementsByTagName("a");
 a[0].onmouseover = 関数(){
  要素を移動します("view",0,0,10);
 };
 a[1].onmouseover = 関数(){
  要素を移動します("view",-200,0,10);
 };
 a[2].onmouseover = 関数(){
  要素を移動します("view",-400,0,10);
 };
}


/*移動の意味* パラメータ: 画像が配置されている要素の ID、画像を移動する左のオフセット、上部のオフセット、時間*/
関数moveElement(要素ID,左,上,間隔){
 /* 下位互換性 */
 if(!document.getElementById) は false を返します。
 if(!document.getElementById(elementID)) は false を返します。

 /*画像を取得する*/
 var img = document.getElementById(要素ID);

 /*現在の要素がすでにアニメーション関数内にあるかどうかを判定する*アニメーションの蓄積を防ぐ*/
 if(img.moveNow){
  /* アニメーションスタックをクリアします */
  タイムアウトをクリアします(img.moveNow);
 }

 /*要素の左と上が設定されているかどうかを判定します*/
 if(!img.style.left){
  スタイル:
 }
 if(!img.style.top){
  スタイルトップ = "0px";
 }


 /*画像の現在の位置を取得します* この時点で取得される値は文字列形式なので、parseInt() を使用して強制的に文字列に変換します*/
 var oldLeft = parseInt(img.style.left);
 var oldTop = parseInt(img.style.top);

 /*現在の位置と目標位置を比較する*/
 if(oldLeft == 左 && oldTop == 上){
  true を返します。
 }

 /*ユーザーエクスペリエンスを確保するため、移動距離が大きい場合は移動を速くする必要があります*移動距離が小さい場合は遅くすることができます*距離の差に基づいて移動距離を判断し、毎回距離の差の1/10ずつ移動します
 */
 /*dist変数は、現在のオフセットとターゲットオフセット間の距離を格納するために使用されます*/
 var 分散 = 0;
 if(oldLeft < left){
  /*ceil() は小数点以下を切り上げて 1 未満の数値を防ぎます*/
  dist = Math.ceil((left-oldLeft)/10);
  古い左 = 古い左 + 距離;
 }
 (古い左>左)の場合{
  dist = Math.ceil((oldLeft-left)/10);
  oldLeft = oldLeft - dist;
 }
 if(oldTop < top){
  dist = Math.ceil((top-oldTop)/10);
  古いTop = 古いTop + 距離;
 }
 if(oldTop > top){
  dist = Math.ceil((oldTop-top)/10);
  oldTop = oldTop - dist;
 }

 /*動く*/
 img.style.left = oldLeft+"px";
 img.style.top = oldTop+"px";

 /*関数を呼び出す*/
 var result = "moveElement('"+elementID+"',"+left+","+top+","+interval+")";
 /*この要素の属性としてアニメーションを実行する関数を設定します*/
 img.moveNow = setTimeout(結果、間隔);
}

LoadEvent を追加します(表示);

最終執行効果

このとき、マウスを別のリスト項目に移動すると、リストの下の画像が対応するプレビュー画像の位置に移動します。

この時点で、簡単なスライドショーのデモが完成しました。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jsスライドの実装
  • 画像切り替えのスライド効果を実現するJavaScriptのソースコード
  • 美しい js タブ画像回転効果コード (カスタマイズ可能なスライドショーと画像バッファの切り替え)
  • JS+FLASHスライドショー画像スクリプト、コードが整理されており、呼び出しがより便利になります!
  • JavaScript を使用してメンテナンス可能なスライドショー コードを作成する
  • スライドショー画像を実現する js サンプルコード
  • JSで実装されたスライドショー切り替え効果
  • JSは複数の画像を順番に再生する効果を実現します
  • JS を使用して Taobao スライドショー効果を実装する方法
  • 自動画像カルーセルスライドショー特殊効果コード共有を備えた js

<<:  Sublime TextがUbuntuで中国語を入力できない問題の最も簡単な解決策

>>:  MySQL のデフォルトのストレージ エンジンを変更する方法

推薦する

Linux の総合システム監視ツール dstat の詳細な例

オールラウンドなシステム監視ツール dstat dstat は、vmstat、iostat、nets...

MySQL トランザクション分離レベルと MVCC の詳細な説明

目次トランザクション分離レベル同時トランザクション実行中に発生した問題SQL標準の4つの分離レベルM...

Vue は PC カメラを呼び出してリアルタイムで写真を撮る機能を実装します

VueはPCカメラを呼び出してリアルタイムで写真を撮影します。参考までに、具体的な内容は次のとおりで...

Mysql5.7.14 Linux版のパスワードを忘れた場合の完璧な解決策

/etc/my.confファイルで、[mysqld]の下に次の行を追加します: skip-grant...

UbuntuでGRUBの起動時間を変更する

grubの起動時間を変更するためのオンライン検索は基本的に/etc/default/grubを変更す...

ウェブページ制作をマスターするために必要な6つのスキルのまとめ

ウェブデザイナーはジェネラリストであると言わざるを得ません。グラフィックデザイナーは、さまざまな特殊...

MySQL での limit の使用方法は何ですか (推奨)

SELECT * FROM テーブル名制限m,n; SELECT * FROM テーブル LIMI...

Docker 経由で Spring Boot アプリケーションを公開およびデプロイするプロセスの分析

目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...

K3s 入門ガイド - Docker で K3s を実行するための詳細なチュートリアル

k3dとは何ですか? k3d は、Docker で K3s クラスターを実行するための小さなプログ...

Node.js のモジュール性、npm パッケージ マネージャーの説明

目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...

Ubuntu 18.04 向け VMware Tools のインストールと構成のチュートリアル

この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...

3つの主要データベース(Mysql、SqlServer、Oracle)の違いについて簡単に説明します。

マイグレーションアドバンテージ:小型、高速、総所有コストが低い、オープンソース。複数のオペレーティン...

VMware Workstation 14 Pro は CentOS 7.0 をインストールします

VMware Workstation 14 ProにCentOS 7.0をインストールする具体的な方...

Nginx 構成 SSL および WSS 手順の紹介

目次序文1. Nginxのインストール1. Nginxをダウンロードする2. 依存関係をインストール...

実行後にdocker nginxにアクセスできない問題の解決策

## 1最近、docker デプロイメントを学習しており、当初は nginx を docker 化す...