文字１４■実用■回転するメニュー

●2017/06/11：即時関数で囲んで、グローバル変数を消しました。
ページのロードが完了するとメニューが回転しながら展開され、一定の半径になると等速円運動に移行します。
マウスで触れるとクリックしやすいように回転が止まります。
メニューの位置指定をスクロールしても固定か、移動かを選択できるようにしました。
見本は固定を選択したので、スクロールしても同じ固定位置に表示されます。

原本をHTML5対応にし、ほんの少し簡略化しています。
原本はnaruken なる研から。
原本のメニューは背景色ではなく画像表示で、右端にテーブルで別にメニューが表示されます。

cssでのグラデーション表示はほんっとにはじめてのHTML5を参考にしました。

2016/03/27：位置指定やid名等、少し修正。
2017/06/11：「i」を「var i」に修正。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字１４■実用■回転するメニュー</title>

<!--★コピーここから-->
<style type="text/css"><!--
body{background:#efd;}/*★背景色　薄緑色。不要なら削除*/

/*★円形メニューの装飾指定。位置指定はJavaScriptのソースの中でする*/
#Rmenu div{
background-color:#9f2;/*★背景色指定。グラデが効かない時のため*/
z-index:1;/*★他のモノの上に表示*/
font-size:12px;/*★メニューの文字サイズ*/
width:80px;/*★メニューの横幅*/
height:80px;/*★メニューの縦幅*/
border-radius: 50%;/*★角丸の円表示で円形にする*/
border:solid 1px #fff;/*★白の枠線指定*/
box-shadow: 5px 5px 10px #777;/*★影指定*/
text-align:center;/*★文字の左右の中央配置*/
line-height: 80px;/*★heightと同じ数値指定で上下の中央位置*/
background:radial-gradient(circle at center, #9ff 20%, #9f0 40%, #ff9 100%);/*★背景のグラデーション指定*/
}

#Rmenu div a{text-decoration: none;}/*★円形メニューのリンクの下線を消す*/

#Rmenu div:hover {    /*★円形メニューのリンクのマウスオン時の色変化指定*/
background-color:#9ff;/*★背景色指定。グラデが効かない時のため*/
background: radial-gradient(circle at center, #ff9 20%, #9f0 40%, #9ff 100%); /*★背景のグラデーション指定*/
}
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。個別メニューのid="H"等のHはわかりやすいid名に変更可。その時はJavaScriptのソースの中も変更する-->

<div id="Rmenu"><!--メニュー領域開始。位置指定はJavaScriptのソースの中でする-->

<div id="H"><a href="../index.html" title="HOME">HOME</a></div>
<div id="M"><a href="../mouse_setumei.html" title="マウスストーカー">マウス</a></div>
<div id="S"><a href="../slide_setumei.html" title="スライドショー">スライド</a></div>
<div id="U"><a href="../huruaga_setumei.html" title="画像が降る上る">画像降る上る</a></div>
<div id="F"><a href="../uku_setumei.html" title="画像ふわふわ">画像ふわふわ</a></div>
<div id="B"><a href="../bg_setumei.html" title="動く背景">動く背景</a></div>
<div id="O"><a href="../hoka_setumei.html" title="その他">その他</a></div>
<div id="L"><a href="../link.html" title="リンク">リンク</a></div>

</div><!--id="Rmenu"の終了-->

<script type="text/javascript"><!--
/*=================================================================================
回転するメニュー By naruken なる研　http://naruken.cweb.tk/index.html   LastUpdated 2003/02/27
使用変数[r,Ox,Oy,no,Speed,intar,a,t,ko,id,id2,i]　使用関数[enter(),move(),wait(),restart()]
★原本をHTML5対応にし、画像表示を背景色表示に変更。2017/06/11
===================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var r=150;	   //★原本200。回転半径指定。単位px
var Ox=200;　　　  //★左からの位置。ここを「var Ox=window.innerWidth/2-18;」 にすると、横位置が中央配置になる	
var Oy=230;	   //★原本330。中心y座標縦。上からの位置。
var speed=1/100;   //★回転速度[πrad/inter](マイナスを付けると逆回転)
var intar=50;      //★リフレッシュレート[回/ms](動きの滑らかさ)
var Pos="fixed";   //★スクロールで移動するか？　固定:fixed 　移動:absolute

var a=[H,M,S,U,F,B,O,L];//★idの名前(id="…")をカンマで区切って指定。id名は変更可。その時はbodyのid名も変更する

//指定はここまで-----------------------------------------------------------
var no=a.length;
var t=0, i=0;
var ko=2* Math.PI /no;
no--;
speed=1/( Math.PI *speed);
for(i=0;i<=no;i++){a[i].style.left=Ox+"px"; a[i].style.top=Oy+"px"; a[i].style.position=Pos;}
function enter(){id=setInterval(move,intar);}
function move(){
	t++;
	if(t<=r){
		t=t+3;
		for(i=0;i<=no;i++){
		a[i].style.left=Math.floor(Math.cos(t/speed+i*ko)*t+Ox)+"px";
		a[i].style.top=Math.floor(Math.sin(t/speed+i*ko)*t+Oy)+"px";
		}
	}
	if(t>r){
		for(i=0;i<=no;i++){
		a[i].style.left=Math.floor(Math.cos(t/speed+i*ko)*r+Ox)+"px";
		a[i].style.top=Math.floor(Math.sin(t/speed+i*ko)*r+Oy)+"px";
		}
	}
}
function wait(){
	if (t>=r) {
		try{clearInterval(id); clearInterval(id2);}
		catch(e){}
	}
}
function restart(){ if (t>r) id2=setInterval(move,intar);}
Rmenu.onmouseout=restart; Rmenu.onmouseover=wait;
enter();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

文字１４■実用■回転するメニュー 最終修正日 : 2017/06/11

　文字１４■実用■回転するメニュー　　　　最終修正日 : 2017/06/11