ページ、特にホームページを作成するときは、通常、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; オーバーフロー: 非表示; 位置: 相対的; } スクリプト 実装のアイデア: スクリプトを作成する前に、考えを整理して、何をしたいのかを決めましょう。 /*共有負荷*/ 関数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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Sublime TextがUbuntuで中国語を入力できない問題の最も簡単な解決策
>>: MySQL のデフォルトのストレージ エンジンを変更する方法
Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...
エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...
1. 問題Windows 上の Eclipse を使用して開発されたプロジェクトは Windows ...
WeChatアプレット計算機の例、参考までに、具体的な内容は次のとおりです。インデックス.wxml ...
関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...
MariaDB データベース管理システムは MySQL のブランチであり、主にオープンソース コミュ...
今日は、uniapp を使用して Echarts を統合し、マップ チャートを表示します。 mpvu...
MySQL Select ステートメントはどのように実行されますか?最近、Geek Time で D...
目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...
ますます多くのウェブサイトで、XHTML が HTML4 に取って代わって急速に普及しています。しか...
目次アプリ.vueサブ1.vueサブ2.vue要約する vue2 における非親子コンポーネントの値の...
目次インストール不要のMySQLバージョン1. インストール パッケージをダウンロードします。 2....
目次TomcatをインストールするTomcat 圧縮パッケージをダウンロードTomcatには3つの主...
コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...
以前は、Web ページのプリンタ対応バージョンを作成するには、印刷したときに見栄えがよくなるようにレ...