介绍 & lt; head>
& lt; style>
.mask {
位置:绝对的;
宽度:502 px;
身高:252 px;
左:300 px;
前:350像素;
背景:白色;
z - index: 999;
}
.con {
宽度:500 px;
身高:500 px;
溢出:隐藏;
位置:绝对的;
这个特性:100%;
边界:1 px固体黑色;
用户选择:没有;
光标:指针;
左:300 px;
前:100像素;
}
.con> p {
位置:绝对的;
宽度:250 px;
身高:250 px;/*边境:1 px固体黑色;*/上图:0;
左:125 px;
text-align:中心;
字体大小:16 px;
transform-origin:底部中心;
}
.con1 {
宽度:400 px;
身高:400 px;/*背景:黄色;*/溢出:隐藏;
位置:绝对的;
这个特性:100%;
边界:1 px固体黑色;
用户选择:没有;
光标:指针;
左:350 px;
前:150像素;
}
.con1> p {
位置:绝对的;
宽度:200 px;
身高:200 px;/*边境:1 px固体黑色;*/上图:0;
左:100 px;
text-align:中心;
字体大小:16 px;
transform-origin:底部中心;
}
& lt;/style>
& lt;元名称=皏iewport"
内容=翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=no"/比;
& lt;/head>
& lt; body>
类& lt; p=癿ask"祝辞& lt;/p>
类& lt; p=癱on"祝辞
& lt;/p>
类& lt; p=癱on1"祝辞
& lt;/p>
& lt; script>
conRender ();
conRender1 ();
函数conRender () {
var=document.querySelector监狱(“.con");
var len=16;
var度=360/兰;
(var=0;我& lt;兰;我+ +){
dom var=document.createElement (“p");
dom.style。变换=靶?产生绯闻;+我*度+“度)“;
dom。innerHTML=安莆窆芾怼?+我;
dom.setAttribute (“index",我)
con.appendChild (dom)
}
var mouseDown=false;
var startX=0;
var startY=0;
var endX=0;
恩迪var=0;
var旋转=0;
con.addEventListener (“mousedown",函数(e) {
mouseDown=true;
startX=e.pageX;
startY=e.pageY;
},假);
con.addEventListener (“mousemove",函数(e) {
如果(mouseDown) {
endX=e.pageX;
恩迪=e.pageY;
var距离=Math.sqrt(数学。战俘((endX - startX), 2) +数学。战俘((恩迪- startY), 2))
如果(endX - startX & lt;0 | |恩迪- startY & lt;0){
距离=冻?
}
旋转+=距离
con.style。变换=靶?“;+(旋转/4)+“度)“;
startX=e.pageX;
startY=e.pageY;
var指数=数学。轮((旋转/4)/度);
var缺点=document.querySelectorAll (“.con> p")
(var=0, len=cons.length;我& lt;兰;我+ +){
反对[我].style。颜色=癰lack"
}
document.querySelector (“p[指数=\”;“+指数% len +“.style \“]”)。颜色=皉ed"
document.querySelector .style (“.con1")。变换=靶?“;+(旋转)+“度)“;
}
},假);
document.addEventListener (“mouseup",函数(e) {mouseDown=false;},假);
}
函数conRender1 () {
var=document.querySelector监狱(“.con1");
var len=13;
var度=360/兰;
(var=0;我& lt;兰;我+ +){
dom var=document.createElement (“p");
dom.style。变换=靶?产生绯闻;+我*度+“度)“;
dom。innerHTML=安莆窆芾怼?+我;
dom.setAttribute (“index1",我)
con.appendChild (dom)
}
var mouseDown=false;
var startX=0;
var startY=0;
var endX=0;
恩迪var=0;
var旋转=0;
con.addEventListener (“mousedown",函数(e) {
mouseDown=true;
startX=e.pageX;
startY=e.pageY;
},假);
con.addEventListener (“mousemove",函数(e) {
如果(mouseDown) {
endX=e.pageX;
恩迪=e.pageY;
var距离=Math.sqrt(数学。战俘((endX - startX), 2) +数学。战俘((恩迪- startY), 2))
如果(endX - startX & lt;0 | |恩迪- startY & lt;0){
距离=冻?
}
旋转+=距离
con.style。变换=靶?“;+(旋转/4)+“度)“;
startX=e.pageX;
startY=e.pageY;
var指数=数学。轮((旋转/4)/度);
var缺点=document.querySelectorAll (“.con1> p")
(var=0, len=cons.length;我& lt;兰;我+ +){
反对[我].style。颜色=癰lack"
}
document.querySelector (“p [index1=\”;“+指数% len +“.style \“]”)。颜色=皉ed"
}
},假);
document.addEventListener (“mouseup",函数(e) {mouseDown=false;},假);
}
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章主要介绍了js实现圆形菜单选择器的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
具体内容如下:
免费推荐:javascript(视频)
代码:
