スライド効果を実現するためのネイティブ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 のデフォルトのストレージ エンジンを変更する方法

推薦する

Docker が MySQL イメージをプルするのが遅すぎる問題を解決する

Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...

ソケット '/tmp/mysql.sock' 経由でローカル MySQL に接続できない解決策

エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...

Linux 上の Tomcat で MySQL にデータを挿入するときに中国語の文字化けが発生する問題を解決する

1. 問題Windows 上の Eclipse を使用して開発されたプロジェクトは Windows ...

WeChat アプレット計算機の例

WeChatアプレット計算機の例、参考までに、具体的な内容は次のとおりです。インデックス.wxml ...

MySQLでクエリキャッシュを実行する方法と失敗を解決する方法

関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...

CentOS 8 に MariaDB をインストールするための詳細なチュートリアル

MariaDB データベース管理システムは MySQL のブランチであり、主にオープンソース コミュ...

uniappを使用してWeChatミニプログラムでEChartsを使用する方法

今日は、uniapp を使用して Echarts を統合し、マップ チャートを表示します。 mpvu...

MySQL SELECT文の実行方法

MySQL Select ステートメントはどのように実行されますか?最近、Geek Time で D...

Docker-compose インストール yml ファイルの設定方法

目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...

XHTML ドキュメントで JavaScript と CSS を正しく使用する方法

ますます多くのウェブサイトで、XHTML が HTML4 に取って代わって急速に普及しています。しか...

Vue3 における非親子コンポーネントの値転送の詳細な説明

目次アプリ.vueサブ1.vueサブ2.vue要約する vue2 における非親子コンポーネントの値の...

MySQLのインストールと設定に関する詳細なチュートリアル

目次インストール不要のMySQLバージョン1. インストール パッケージをダウンロードします。 2....

Linux (CentOS7) に Tomcat をインストールし、Tomcat をスタートアップ項目として設定します (tomcat8 を例に挙げます)

目次TomcatをインストールするTomcat 圧縮パッケージをダウンロードTomcatには3つの主...

html2canvas を使用して HTML コードを画像に変換する方法

コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...

XHTML CSS ページをプリンタ ページに変換する

以前は、Web ページのプリンタ対応バージョンを作成するには、印刷したときに見栄えがよくなるようにレ...