この場合、transition という単語を間違って書いたため、午後中ずっとそれに取り組みました。本当に目が見えなくなりました。二度とこのような愚かな間違いはしません >_< 1. 知識ポイント分析 1. APDivの配置レイアウト 2. クリック イベントでの遷移と変換の効果。 3. 各小さいアイコンの左と上の値を計算します。 4. 小さなアイコンをクリックした後、アイコンの遷移イベントをリッスンします。 2. HTMLソースコード <div id="ステージ"> <div id="nav"> <img src="images/1.png"> <img src="images/2.png"> <img src="images/3.png"> <img src="images/4.png"> <img src="images/5.png"> </div> <div id="home"> <img src="images/home.png"> </div> </div> 3. CSSスタイル 体 { マージン: 0; } 体{ 背景色:#eee;} #ステージ{ 幅: 300ピクセル; 高さ: 300px; 位置: 相対的; 上: 150px; マージン: 0 自動; } #ナビ{ 位置: 絶対; 幅: 120ピクセル; 高さ: 107px; 左: 50%; 左マージン: -60px; 上位: 50%; 上マージン: -53px; } #ナビ画像{ 幅: 100%; 位置: 絶対; 左: 0; 上: 0; カーソル: ポインタ; } #家 { 位置: 絶対; 幅: 150ピクセル; 高さ: 134px; 左: 0; 上: 0; 右: 0; 下部: 0; マージン: 自動; カーソル: ポインタ; 遷移: 0.5 秒のイーズインアウト; } #ホーム画像{ 幅: 100%; } 4. JavaScript ソースコード window.onload = 関数(){ var oHome = document.getElementById("home"); var oNav = document.getElementById("nav"); var aImg=oNav.getElementsByTagName("img"); var imgLen=aImg.length; var onOff = true; var iR = -260; //マウスが各小さなアイコンをクリックすると for(var i=0;i<imgLen;i++){ aImg[i].onclick=関数(){ this.style.transition="0.2秒"; this.style.transform="スケール(1.2) 回転(720度)"; スタイル不透明度 = 0.1; addEnd(this,end); // 小さな画像がクリックされるたびにイベント リスナーを追加します。イベントが終了すると、終了関数が実行されます。 } } //イベントが終了したら、終了関数を実行し、デフォルト値を復元し、イベント リスナーを削除します。 関数終了(){ this.style.transition="0.1秒"; this.style.transform="スケール(1) 回転(720度)"; スタイル不透明度 = 1; 終了を削除します(this,end); } //ホーム アイコンをクリックすると、最初は時計回りに回転し、2 回目は反時計回りに回転します。 oHome.onclick=関数(){ if(オンオフ) { this.style.transform="回転(360度)"; //各画像の左と上の値を設定します。 for(var i=0;i<imgLen;i++){ // 開始角度は 30 度です。 var oLt=getLeftTop(iR,120/(imgLen-1)*i+30); aImg[i].style.left=oLt.l+"px"; aImg[i].style.top=oLt.t+"px"; // 各画像には 100 ミリ秒の遅延があります。 aImg[i].style.transition="0.5s イーズインアウト "+100*i+"ms"; aImg[i].style.transform="スケール(1) 回転(720度)"; } } それ以外 { this.style.transform="回転(0度)"; for(var i=0;i<imgLen;i++){ aImg[i].style.left=0+"px"; aImg[i].style.top=0+"px"; // 画像は逆の順序で取得されます。各画像には 100 ミリ秒の遅延があります。 aImg[i].style.transition="0.5s イーズインアウト "+100*(imgLen-i-1)+"ms"; aImg[i].style.transform="スケール(1) 回転(0度)"; } } onOff=!onOff; } } //img画像の左と上の値を取得します。ピタゴラスの定理では、内角と斜辺が与えられれば、対辺の長さは sin(ラジアン)*斜辺で求められます。辺の長さ: cos(ラジアン)*斜辺。ラジアン = 度 / 180 * 円周率。 関数 getLeftTop(iR,iDeg){ var ileft=Math.round(Math.sin(iDeg/180*Math.PI)*iR); var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR); // 2 つの値を返す場合は、オブジェクト メソッドを使用します。 戻る { "l":i左, "t":iトップ } } //終了関数を追加し、終了関数を削除します。遷移イベントをリッスンします。 関数addEnd(obj,fn){ obj.addEventListener("transitionend",fn,false); } 関数removeEnd(obj,fn){ obj.removeEventListener("transitionend",fn,false); } 完全なページコード <!doctypehtml> <html> <ヘッド> <メタ文字セット="utf-8"> <title>円形ナビゲーション</title> <スタイル> 体 { マージン: 0; } 体{ 背景色:#eee;} #ステージ{ 幅: 300ピクセル; 高さ: 300px; 位置: 相対的; 上: 150px; マージン: 0 自動; } #ナビ{ 位置: 絶対; 幅: 120ピクセル; 高さ: 107px; 左: 50%; 左マージン: -60px; 上位: 50%; 上マージン: -53px; } #ナビ画像{ 幅: 100%; 位置: 絶対; 左: 0; 上: 0; カーソル: ポインタ; } #家 { 位置: 絶対; 幅: 150ピクセル; 高さ: 134px; 左: 0; 上: 0; 右: 0; 下部: 0; マージン: 自動; カーソル: ポインタ; 遷移: 0.5 秒のイーズインアウト; } #ホーム画像{ 幅: 100%; } </スタイル> <スクリプト> window.onload = 関数(){ var oHome = document.getElementById("home"); var oNav = document.getElementById("nav"); var aImg=oNav.getElementsByTagName("img"); var imgLen=aImg.length; var onOff = true; var iR = -260; //マウスが各小さなアイコンをクリックすると for(var i=0;i<imgLen;i++){ aImg[i].onclick=関数(){ this.style.transition="0.2秒"; this.style.transform="スケール(1.2) 回転(720度)"; スタイル不透明度 = 0.1; addEnd(this,end); // 小さな画像がクリックされるたびにイベント リスナーを追加します。イベントが終了すると、終了関数が実行されます。 } } //イベントが終了したら、終了関数を実行し、デフォルト値を復元し、イベント リスナーを削除します。 関数終了(){ this.style.transition="0.1秒"; this.style.transform="スケール(1) 回転(720度)"; スタイル不透明度 = 1; 終了を削除します(this,end); } //ホーム アイコンをクリックすると、最初は時計回りに回転し、2 回目は反時計回りに回転します。 oHome.onclick=関数(){ if(オンオフ) { this.style.transform="回転(360度)"; //各画像の左と上の値を設定します。 for(var i=0;i<imgLen;i++){ // 開始角度は 30 度です。 var oLt=getLeftTop(iR,120/(imgLen-1)*i+30); aImg[i].style.left=oLt.l+"px"; aImg[i].style.top=oLt.t+"px"; // 各画像には 100 ミリ秒の遅延があります。 aImg[i].style.transition="0.5s イーズインアウト "+100*i+"ms"; aImg[i].style.transform="スケール(1) 回転(720度)"; } } それ以外 { this.style.transform="回転(0度)"; for(var i=0;i<imgLen;i++){ aImg[i].style.left=0+"px"; aImg[i].style.top=0+"px"; // 画像は逆の順序で取得されます。各画像には 100 ミリ秒の遅延があります。 aImg[i].style.transition="0.5s イーズインアウト "+100*(imgLen-i-1)+"ms"; aImg[i].style.transform="スケール(1) 回転(0度)"; } } onOff=!onOff; } } //img画像の左と上の値を取得します。ピタゴラスの定理では、内角と斜辺が与えられれば、対辺の長さは sin(ラジアン)*斜辺で求められます。辺の長さ: cos(ラジアン)*斜辺。ラジアン = 度 / 180 * 円周率。 関数 getLeftTop(iR,iDeg){ var ileft=Math.round(Math.sin(iDeg/180*Math.PI)*iR); var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR); // 2 つの値を返す場合は、オブジェクト メソッドを使用します。 戻る { "l":i左, "t":iトップ } } //終了関数を追加し、終了関数を削除します。遷移イベントをリッスンします。 関数addEnd(obj,fn){ obj.addEventListener("transitionend",fn,false); } 関数removeEnd(obj,fn){ obj.removeEventListener("transitionend",fn,false); } </スクリプト> </head> <本文> <div id="ステージ"> <div id="nav"> <img src="images/1.png"> <img src="images/2.png"> <img src="images/3.png"> <img src="images/4.png"> <img src="images/5.png"> </div> <div id="home"> <img src="images/home.png"> </div> </div> </本文> </html> 上記は、CSS3 が変換変形とイベントを組み合わせて扇形ナビゲーションを完成させる方法についての詳細です。CSS3 扇形ナビゲーションの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 |
<<: Layui は複数条件クエリのサンプルコードを実装します
nginx はリクエストを受信すると、まず server_name でサーバーを照合し、次にサーバー...
目次序文議論の基本概念議論の役割実パラメータと仮パラメータの数を取得する実際のパラメータ値を変更する...
前提条件: データベースを復元するために必要な .frm ファイルと .ibd ファイルを保存します...
1. システム内で開いているファイルの最大数を確認する #現在のリソース制限設定を表示する ulim...
ある日、内部結合を含む SQL ステートメントの実行速度はそれほど遅くはない (0.1 ~ 0.2)...
1. 成果を達成する 2. バックエンドから返されるデータ形式 「リスト」: [ { "i...
目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...
目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...
目次1. 要件の説明2. アイデアの概要1. 延長を要求する2. アイデアの概要3. SQLコード1...
https://docs.microsoft.com/ja-jp/windows/wsl/wsl-...
目次序文SVGを生成するSVGスプライトの紹介プロジェクトアイコンを取得するプロジェクトのセットアッ...
序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...
Linux で新たに発見された sudo の脆弱性を悪用すると、特定のユーザーが root としてコ...
問題の説明VMware Workstationが新しい仮想マシンを作成し、64ビットオペレーティング...
カバーインデックスとは何ですか?クエリで使用されるすべてのフィールドを含むインデックスを作成すること...