CSS3は、変換変形とイベントを組み合わせて扇形のナビゲーションを完成させます。

CSS3は、変換変形とイベントを組み合わせて扇形のナビゲーションを完成させます。

この場合、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 は複数条件クエリのサンプルコードを実装します

>>:  Apache POIの基本的な使い方の詳しい説明

推薦する

Nginx がリクエストを処理する際のマッチングルールの詳細な分析

nginx はリクエストを受信すると、まず server_name でサーバーを照合し、次にサーバー...

JavaScript における Arguments オブジェクトの使用に関する詳細な説明

目次序文議論の基本概念議論の役割実パラメータと仮パラメータの数を取得する実際のパラメータ値を変更する...

InnoDB タイプの MySql によるテーブル構造とデータの復元

前提条件: データベースを復元するために必要な .frm ファイルと .ibd ファイルを保存します...

各 Nginx プロセスで開くことができるファイルの最大数を設定する方法

1. システム内で開いているファイルの最大数を確認する #現在のリソース制限設定を表示する ulim...

MySql SQL最適化のヒントの共有

ある日、内部結合を含む SQL ステートメントの実行速度はそれほど遅くはない (0.1 ~ 0.2)...

Vue のドロップダウン ボックスのセカンダリ リンク効果を実装するためのサンプル コード

1. 成果を達成する 2. バックエンドから返されるデータ形式 「リスト」: [ { "i...

JavaScript は詳細なコードで星座クエリ機能を実装します

目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...

NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。

目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...

時系列転位修復ケースを実装するSQL

目次1. 要件の説明2. アイデアの概要1. 延長を要求する2. アイデアの概要3. SQLコード1...

Docker での WSL の構成と変更の問題について

https://docs.microsoft.com/ja-jp/windows/wsl/wsl-...

iconfontアイコンライブラリをvueに導入するエレガントな実践記録

目次序文SVGを生成するSVGスプライトの紹介プロジェクトアイコンを取得するプロジェクトのセットアッ...

純粋なCSSでデジタルプラスとマイナスボタンを実装するための最適なソリューション

序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...

Linux の sudo 脆弱性により不正な特権アクセスが発生する可能性がある

Linux で新たに発見された sudo の脆弱性を悪用すると、特定のユーザーが root としてコ...

VMwareがwin10ホームバージョンに64ビットオペレーティングシステムをインストールできない問題を解決します

問題の説明VMware Workstationが新しい仮想マシンを作成し、64ビットオペレーティング...

MySQLカバーインデックスの使用例

カバーインデックスとは何ですか?クエリで使用されるすべてのフィールドを含むインデックスを作成すること...