html+css+js圆形旋转菜单
1、新建html文档。
2、书写hmtl代码。
<div id="outerDiv">
<div id="m0"></div>
<div id="m1">1</div>
<div id="m2">2</div>
<div id="m3">3</div>
<div id="m4">4</div>
<div id="m5">5</div>
<div id="m6">6</div>
<div id="m7">7</div>
<div id="m8">8</div>
</div>
3、初始化css代码。
<style>
* { margin: 0; padding: 0 }
html { overflow-y: scroll }
body, h1, h2, h3, p, div, dl, dt, dd, ul, ol, li, table, th, td, form, button, input, textarea, legend, hr { padding: 0; margin: 0 }
body { padding: 0; margin: 0; color: #333; font: 12px/18px "微软雅黑", arial; height: 100% }
button, input, select, textarea { font-size: 100% }
textarea { font: 14px/20px "微软雅黑" }
button { border: 0 }
li { list-style: none }
img { border: 0; }
a { color: #06c; text-decoration: none; cursor: pointer; outline: none; hide-focus:expression(this.hideFocus = true);}
a:hover { color: #06c; text-decoration: underline }
.left{ float:left;}
.right{ float:right;}
.clear:after,ul:after{content:"";display:block;visibility:hidden;height:0;clear:both;}
.clear,.area,.con:after{zoom:1}
</style>
4、书写css代码。
<style>
#outerDiv{background-color: black;width:300px;height:300px;border-radius:150px;position: absolute;}
#m0{background: blue;width: 100px;height: 100px;border-radius: 50px;position: absolute;left:100px;top:100px;}
#m1,#m2,#m3,#m4,#m5,#m6,#m7,#m8{position: absolute;}
#m1,#m3,#m5,#m7{background: yellow;}
#m2,#m3,#m6,#m8{ background: red;}
</style>
5、书写并添加js代码。
<script src="js/jquery-1.11.0.js"></script>
<script src="js/jquery.rotate.min.js"></script>
<script>
var or = 150;
var ir = 50;
var mWidth = 54;
var mDLen = Math.sqrt(2 * Math.pow(mWidth,2));
//第1菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-90(-PI/2), 求菜单块中心点坐标
var m1X = parseInt( (Math.cos( -1 * Math.PI / 2 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
var m1Y = parseInt( (Math.sin( -1 * Math.PI / 2 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
$("#m1").width(mWidth);
$("#m1").height(mWidth);
$("#m1").offset( {top:m1Y,left:m1X} );
//第2菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-45(-PI/4), 求菜单块中心点坐标
var m2X = parseInt( (Math.cos( -1 * Math.PI / 4 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
var m2Y = parseInt( (Math.sin( -1 * Math.PI / 4 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
$("#m2").width(mWidth);
$("#m2").height(mWidth);
$("#m2").offset( {top:m2Y,left:m2X} );
//第3菜单块中心点与以o(150,150)为圆心的的X轴的夹角为0(0), 求菜单块中心点坐标
var m3X = parseInt( (Math.cos( 0 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
var m3Y = parseInt( (Math.sin( 0 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
$("#m3").width(mWidth);
$("#m3").height(mWidth);
$("#m3").offset( {top:m3Y,left:m3X} );
//第4菜单块中心点与以o(150,150)为圆心的的X轴的夹角为45(PI/4), 求菜单块中心点坐标
var m4X = parseInt( (Math.cos( Math.PI / 4 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
var m4Y = parseInt( (Math.sin( Math.PI / 4 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
$("#m4").width(mWidth);
$("#m4").height(mWidth);
$("#m4").offset( {top:m4Y,left:m4X} );
//第5菜单块中心点与以o(150,150)为圆心的的X轴的夹角为90(PI/2), 求菜单块中心点坐标
var m5X = parseInt( (Math.cos( Math.PI / 2 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
var m5Y = parseInt( (Math.sin( Math.PI / 2 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
$("#m5").width(mWidth);
$("#m5").height(mWidth);
$("#m5").offset( {top:m5Y,left:m5X} );
//第6菜单块中心点与以o(150,150)为圆心的的X轴的夹角为135(0.75PI), 求菜单块中心点坐标
var m6X = parseInt( (Math.cos( 0.75 * Math.PI ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
var m6Y = parseInt( (Math.sin( 0.75 * Math.PI ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
$("#m6").width(mWidth);
$("#m6").height(mWidth);
$("#m6").offset( {top:m6Y,left:m6X} );
//第7菜单块中心点与以o(150,150)为圆心的的X轴的夹角为180(PI), 求菜单块中心点坐标
var m7X = parseInt( (Math.cos( Math.PI ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
var m7Y = parseInt( (Math.sin( Math.PI ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
$("#m7").width(mWidth);
$("#m7").height(mWidth);
$("#m7").offset( {top:m7Y,left:m7X} );
//第8菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-135(PI), 求菜单块中心点坐标
var m8X = parseInt( (Math.cos( -0.75 * Math.PI ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
var m8Y = parseInt( (Math.sin( -0.75 * Math.PI ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );
$("#m8").width(mWidth);
$("#m8").height(mWidth);
$("#m8").offset( {top:m8Y,left:m8X} );
var preX,preY;//上一次鼠标点的坐标
var curX,curY;//本次鼠标点的坐标
var preAngle;//上一次鼠标点与圆心(150,150)的X轴形成的角度(弧度单位)
var transferAngle;//当前鼠标点与上一次preAngle之间变化的角度
var a = 0;
for(var i = 0 ; i < 15 ; i++){
$("body").append("<br>");
}
//点击事件
$("#outerDiv").mousedown(function(event){
preX = event.clientX;
preY = event.clientY;
//计算当前点击的点与圆心(150,150)的X轴的夹角(弧度) --> 上半圆为负(0 ~ -180), 下半圆未正[0 ~ 180]
preAngle = Math.atan2(preY - 150, preX - 150);
//移动事件
$("html").mousemove(function(event){
curX = event.clientX;
curY = event.clientY;
//计算当前点击的点与圆心(150,150)的X轴的夹角(弧度) --> 上半圆为负(0 ~ -180), 下半圆未正[0 ~ 180]
var curAngle = Math.atan2(curY - 150, curX - 150);
transferAngle = curAngle - preAngle;
a += (transferAngle * 180 / Math.PI);
$('#outerDiv').rotate(a);
for( var i = 1 ; i <= 8 ; i++ ){
$("#m"+i).rotate(-a);
}
preX = curX;
preY = curY;
preAngle = curAngle;
});
//释放事件
$("html").mouseup(function(event){
$("html").unbind("mousemove");
});
});
</script>
6、代码整体结构。
7、查看效果。
