這篇文章主要為大家詳細介紹了js實(shí)現圓形菜單選擇器，實(shí)現文中示例代碼介紹的圓形非常(chang)詳細，具有一定的菜單??參考價(jià)值，感興趣的選擇小伙伴們可以參考一下
本文實(shí)┐(′?｀)┌例為大??家分享了js實(shí)現圓形菜單選擇??器的具體代碼，供大家參考，(°□°)實(shí)現具體內容如下
代碼：
<hea??d>
<styl(′Д` )e>
.mask{
position: absolute;
width: 502px;
height: 252px;
left:300px;
top:350px;
background: white??;
z-index: 99(╯‵□′)╯9;
}
.con {
width: 500px;
height: 500px;
overflow: hidden;
position: absolute;
borde??r-radius: 100%;
border: 1px soli(′?ω?`)d black;
user-select: none;
cursor: pointer;
left: 300px;
top: 100px;
}
.con>div {
position: absolute;
width: 250px;
height: 250px;
/* border:1p(?Д?)x soli(T_T)d black; */
top: 0;
left: 125px;
text-ali??gn: center;
font-size: 16px;
transform-origin: bottom center;
}
.con1 {
width: 400px;
height: 400px;
/* background: yellow; */
overflow:?? hidden;
position: absolute;
border-radius: 100%;
border: 1px solid black┐(′д｀)┌;
user-select: none;
cursor: pointer;
left: 350px;
top: 150px;
}
.con??1>div {
position: absoluteˉ\_(ツ)_/ˉ;
width: 200px;
he??ight: 200px;
/* border:??1px solid black; */
top: 0;
left: 100px;
text-align: center;
font-siz??e: 16px;
transform-origin: bottom center;
}
</style>
<meta name="viewport"
content='width=device-width,圓形initial-s(╯°□°）╯︵ ┻━┻cale=1,minimum-scale(′▽?zhuān)?=1,maximum-scale=1,user-scalable=no' />
</head>
<body>
<div class='mask'></div>
<d??iv class='con'>
</div>
<div(′_ゝ`) class='con1'>
</div>
<script>
conRender();
conRender1();
function conRender() {
var con = document.querySelector(".co(?????)n");
var len = 16;
var deg = 360 / len;
for (var i = 0; i < len; i++) {
var dom = document.createElement("div");
dom.style.transform = "rotate(-" + i * deg + "deg)";
dom.innerHTML='財務(wù)管理' + i;
dom.set??Attribute("index", i)
con.appendChild(dom)
}
var mouseDown = false;??
var startX = 0;
var startY = 0;
var endX = 0;
var endY = 0;
var rotate = 0;
con.addEventListene(′▽?zhuān)?)r("mousedown", function (e) {
mouseDown = true;
startX = e.pageX;
startY = e.pageY;
}, fal(?⊿?)se);
con.addEventListener("mousemove", function (e) {
if (mouseDown) {
endX = e.pageX;
endY = e.pageY;
var distance = Math.sqrt(Math.pow((endX - startX), 2) + Mat┐(′?｀)┌h.pow((endY - startY), 2))
if (endX - startX < 0 ||?? endY - startY < 0) {
distance = -dis(′?ω?`)tance
}
rotate += distance
con.style.transform = "rotate(" + (rotate / 4) + "deg)";
startX = e.pageX;
startY = e.pageY;
var index = Math.round((rotate / 4) / deg);
var cons = document.querySelectorAll(".con>div")
for (var i = 0,(/ω＼) len = cons.length; i < len; i++) {
cons[i].style.color='black'
}
document.querySelector("div[index=\"" + index % len + "\"]").styl(′；д；`)e.color = "r??ed"
document.querySelector(".con1").style.transform='rotate(' + (rotate) + "deg)";
}
}, false);
docume??nt.addEventListener((°o°)"mouseup", function (e) { mouseDown = false; },?? false);
}
function conRender1() {
var con = document.quer(′▽?zhuān)?ySelector(".con1");
var len = 13;
var deg = 360 / len;
for (var i = 0; i < len; i++)(╯°□°）╯︵ ┻━┻ {
var dom = document.createElement("div");
dom.style.transform='rotate(-' + i * deg + "deg)";
dom.innerHTML='財務(wù)管理' + i;
dom.setAttribute("index1", i)
con.appendChild(dom)
}
var mouseDown = false;
var startX = 0;
var?? startY = 0;
var endX = 0;
var endY = 0;(′_｀)
var rotate = 0;
con.addEventListener("??mousedown", function (e) {
mouseDown = true;
startX = e.pageX;
startY = e.pageY;
}, false);
con.addEventListener("mousemove", function (e) {
if (mouseDown) {
endX = e.pageX;
endY = e.paヽ(′▽?zhuān)?/geY;
var distance = Math.sqrt(Math.pow((endX - star(╯°□°）╯tX), 2) + Math.pow((endY - startY), 2))
if (endX - startX < 0 || endY - startY < 0) {
distance = -distance
}
rotate += distance
con.style.transform='rotate(' + (rotate / 4) + "deg)";
startX = e.pageX;
st(°□°)artY = e.pageY;
var index = Math.round((rotate / 4) / deg);
var con(′?_?`)s?? = document.querySelectorAll(".con1>div")
for (va??r i = 0, len = cons.length; i < len; i++) {
cons[i].style.color = "black"
}
documen??t.querySelector("div[index??1=\"" + index % len + "\"]").style.color='red'
}
}, false);
document.addEventListene??r("mouseup", function (e) { mous(◎_◎;)eDown = false; }, false(????));
}
</script>
</body>
</html>
以上就是本文??的全部?jì)热?，希望對大家的菜單學(xué)習有所(suo)幫助，也希望大家多多支持腳本之家。選擇
實(shí)現來(lái)源：腳本之家
實(shí)現鏈接：https://www.jb51.net/article/201314.htm
實(shí)現
網(wǎng)站二維碼
導航
電話(huà)
短信
咨詢(xún)
地圖
分享
