CSS3圆圈与可点击项目jQuery（径向菜单） [英] CSS3 circle with clickable items jQuery(Radial Menu)
本文介绍了CSS3圆圈与可点击项目jQuery（径向菜单）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在哪里可以找到一个例子，用css3和jQuery创建一个这样的圆圈（用于导航）
中心应该有文本（html）
当您点击（或悬停）下一个项目，中心内容应该更改，以及背景颜色
Where can I find an example to create a circle like this with css3 and jQuery (for navigation)
There should be text (html) in the center
When you click (or hover) the next item, the center content should change, and also the background color
推荐答案
/**
* Circular menu v2
*/
* { margin: 0; padding: 0; }
html { font: 100%/1.3 Century Gothic, Verdana, sans-serif; }
body { overflow: hidden; min-width: 20em; }
.menuopt { display: none; }
.circle, .circle:before, .circle:after { border-radius: 50%; }
nav {
margin: 5em auto;
min-width: 16em; width: 72%; max-width: 40em;
}
nav ul {
position: relative;
padding: 50%;
max-width: 0; max-height: 0;
box-shadow: 0 0 .5em rgba(0,0,0,.5);
list-style: none;
background: white;
}
nav li {
position: absolute;
transition: 2s;
}
.slice {
overflow: hidden;
position: absolute;
top: 0; left: 0;
width: 50%; height: 50%;
transform-origin: 100% 100%;
}
.unsel {
top: 34%; left: 34%;
width: 32%; height: 32%;
box-shadow: 0 0 .75em;
background: paleturquoise;
}
.coconut { transform: skewX(50deg); }
.vanilla { transform: rotate(40deg) skewX(50deg); }
.orange { transform: rotate(80deg) skewX(50deg); }
.almond { transform: rotate(120deg) skewX(50deg); }
.grape { transform: rotate(160deg) skewX(50deg); }
.blackberry { transform: rotate(-160deg) skewX(50deg); }
.cherry { transform: rotate(-120deg) skewX(50deg); }
.strawberry { transform: rotate(-80deg) skewX(50deg); }
.raspberry { transform: rotate(-40deg) skewX(50deg); }
.magnifiable { height: 100%; }
nav label { cursor: pointer; }
.slice label {
display: block;
width: 200%; height: 200%;
transform: skew(-50deg) rotate(-70deg);
box-shadow: 0 0 .1em black;
opacity: .5;
color: transparent;
font-size: .8em;
line-height: 1.9;
text-align: center;
text-decoration: none;
transition: 1s;
}
.slice label:before {
position: absolute;
top: 10%; left: 10%;
width: 80%; height: 80%;
border-radius: 50%;
box-shadow: 0 0 1em rgba(0,0,0,.5);
background-position: 50% 0;
background-repeat: no-repeat;
background-size: 35% 35%;
content: '';
}
.slice label:hover { opacity: 1; }
.dark label:hover { color: white; }
.light label:hover { color: black; }
.unsel label {
display: block;
height: 100%;
background: radial-gradient(rgba(0,0,0,.5), transparent 50%);
}
.coconut label, .ococonut:checked ~ nav .unsel { background: #f4f5fa; }
.vanilla label, .ovanilla:checked ~ nav .unsel { background: #ffeb98; }
.orange label, .oorange:checked ~ nav .unsel { background: #ffb038; }
.almond label, .oalmond:checked ~ nav .unsel { background: #d3a573; }
.grape label, .ogrape:checked ~ nav .unsel { background: #d9e260; }
.blackberry label, .oblackberry:checked ~ nav .unsel { background: #833a68; }
.cherry label, .ocherry:checked ~ nav .unsel { background: #b1001d; }
.strawberry label, .ostrawberry:checked ~ nav .unsel { background: #ec0404; }
.raspberry label, .oraspberry:checked ~ nav .unsel { background: #ef6982; }
.coconut label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Cocos_nucifera00.jpg/320px-Cocos_nucifera00.jpg); }
.vanilla label:before { background-image: url(http://www.learningherbs.com/image-files/vanilla-extract-7.jpg); }
.orange label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/OrangeBloss_wb.jpg/250px-OrangeBloss_wb.jpg); }
.almond label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/PikiWiki_Israel_7025_Amond_blossom.jpg/170px-PikiWiki_Israel_7025_Amond_blossom.jpg); }
.grape label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Table_grapes_on_white.jpg/220px-Table_grapes_on_white.jpg); }
.blackberry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Ripe%2C_ripening%2C_and_green_blackberries.jpg/220px-Ripe%2C_ripening%2C_and_green_blackberries.jpg); }
.cherry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Cherry_Stella444.jpg/220px-Cherry_Stella444.jpg); }
.strawberry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/PerfectStrawberry.jpg/220px-PerfectStrawberry.jpg); }
.raspberry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Raspberries05.jpg/220px-Raspberries05.jpg); }
.slice label:hover:after { opacity: 0; }
.ococonut:checked ~ nav .coconut { transform: skewX(50deg) scale(1.05); }
.ovanilla:checked ~ nav .vanilla { transform: rotate(40deg) skewX(50deg) scale(1.05); }
.oorange:checked ~ nav .orange { transform: rotate(80deg) skewX(50deg) scale(1.05); }
.oalmond:checked ~ nav .almond { transform: rotate(120deg) skewX(50deg) scale(1.05); }
.ogrape:checked ~ nav .grape { transform: rotate(160deg) skewX(50deg) scale(1.05); }
.oblackberry:checked ~ nav .blackberry { transform: rotate(-160deg) skewX(50deg) scale(1.05); }
.ocherry:checked ~ nav .cherry { transform: rotate(-120deg) skewX(50deg) scale(1.05); }
.ostrawberry:checked ~ nav .strawberry { transform: rotate(-80deg) skewX(50deg) scale(1.05); }
.oraspberry:checked ~ nav .raspberry { transform: rotate(-40deg) skewX(50deg) scale(1.05); }
.ococonut:checked ~ nav .coconut label,
.ovanilla:checked ~ nav .vanilla label,
.oorange:checked ~ nav .orange label,
.oalmond:checked ~ nav .almond label,
.ogrape:checked ~ nav .grape label,
.oraspberry:checked ~ nav .raspberry label {
box-shadow: 0 0 .45em rgba(0,0,0,.5);
opacity: 1; color: black;
}
.oblackberry:checked ~ nav .blackberry label ,
.ocherry:checked ~ nav .cherry label,
.ostrawberry:checked ~ nav .strawberry label {
box-shadow: 0 0 .45em rgba(0,0,0,.5);
opacity: 1; color: white;
}
@media (min-width: 25em) { .slice label { font-size: 1em; line-height: 2.3; } }
@media (min-width: 35em) { .slice label { font-weight: 700; line-height: 2.7; } }
<!-- content to be placed inside <body>…</body> -->
<input type='radio' name='opt' id='ococonut' class='menuopt ococonut'>
<input type='radio' name='opt' id='ovanilla' class='menuopt ovanilla'>
<input type='radio' name='opt' id='oorange' class='menuopt oorange'>
<input type='radio' name='opt' id='oalmond' class='menuopt oalmond'>
<input type='radio' name='opt' id='ogrape' class='menuopt ogrape'>
<input type='radio' name='opt' id='oblackberry' class='menuopt oblackberry'>
<input type='radio' name='opt' id='ocherry' class='menuopt ocherry'>
<input type='radio' name='opt' id='ostrawberry' class='menuopt ostrawberry'>
<input type='radio' name='opt' id='oraspberry' class='menuopt oraspberry'>
<input type='radio' name='opt' id='unsel' class='menuopt' checked>
<nav>
<ul class='circle'>
<li class='coconut light slice'>
<label for='ococonut' class='circle'>Coconut</label>
</li>
<li class='vanilla light slice'>
<label for='ovanilla' class='circle'>Vanilla</label>
</li>
<li class='orange light slice'>
<label for='oorange' class='circle'>Orange</label>
</li>
<li class='almond light slice'>
<label for='oalmond' class='circle'>Almond</label>
</li>
<li class='grape light slice'>
<label for='ogrape' class='circle'>Grape</label>
</li>
<li class='blackberry dark slice'>
<label for='oblackberry' class='circle'>Blackberry</label>
</li>
<li class='cherry dark slice'>
<label for='ocherry' class='circle'>Cherry</label>
</li>
<li class='strawberry dark slice'>
<label for='ostrawberry' class='circle'>Strawberry</label>
</li>
<li class='raspberry light slice'>
<label for='oraspberry' class='circle'>Raspberry</label>
</li>
<li class='unsel circle'><label for='unsel'></label></li>
</ul>
</nav>
a href =http://codepen.io/frazerwilson/pen/qEdQzq =nofollow>这一个
Or even this one
$(document).ready(function() {
//Center the "info" bubble in the "circle" div
var divTop = ($("#divCircle").height() - $("#middleBubble").height()) / 2;
var divLeft = ($("#divCircle").width() - $("#middleBubble").width()) / 2;
$("#middleBubble").css("top", divTop + "px");
$("#middleBubble").css("left", divLeft + "px");
//Arrange the icons in a circle centered in the div
numItems = $("#divCircle img").length; //How many items are in the circle?
start = 0.0; //the angle to put the first image at. a number between 0 and 2pi
step = (4 * Math.PI) / numItems; //calculate the amount of space to put between the items.
//Now loop through the buttons and position them in a circle
$("#divCircle img").each(function(index) {
radius = ($("#divCircle").width() - $(this).width()) / 2.3; //The radius is the distance from the center of the div to the middle of an icon
//the following lines are a standard formula for calculating points on a circle. x = cx + r * cos(a); y = cy + r * sin(a)
//We have made adjustments because the center of the circle is not at (0,0), but rather the top/left coordinates for the center of the div
//We also adjust for the fact that we need to know the coordinates for the top-left corner of the image, not for the center of the image.
tmpTop = (($("#divCircle").height() / 2) + radius * Math.sin(start)) - ($(this).height() / 2);
tmpLeft = (($("#divCircle").width() / 2) + radius * Math.cos(start)) - ($(this).width() / 2);
start += step; //add the "step" number of radians to jump to the next icon
//set the top/left settings for the image
$(this).css("top", tmpTop);
$(this).css("left", tmpLeft);
});
});
$('.avatarList').click(function() {
$(this).toggleClass('expand');
$('#divCircle').toggleClass('expand');
});
$('#divCircle img').click(function() {
var theSrc = $(this).attr('src');
// alert(theSrc);
$('.mainImg img').attr('src', theSrc);
});
html {
background: #f2f6f8;
/* Old browsers */
background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f8), color-stop(50%, #d8e1e7), color-stop(51%, #b5c6d0), color-stop(100%, #e0eff9));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
/* IE10+ */
background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0);
/* IE6-9 */
}
.body {
width: 200px;
font-family: sans-serif;
margin: 10% auto;
text-align: center;
height: 200px;
}
#divCircle {
width: 195px;
height: 195px;
border-radius: 200px;
position: relative;
overflow: hidden;
top: -10px;
left: -10px;
opacity: 0;
margin: -60px;
-webkit-transition: opacity 0s 0s;
}
#divCircle img {
position: absolute;
width: 50px;
height: 50px;
background: orange;
border-radius: 60px;
border: 2px #000 solid;
-webkit-transition: all 0.4s;
}
#divCircle img:hover {
border: 2px #333 solid;
width: 55px;
height: 55px;
}
#middleBubble {
text-align: center;
vertical-align: top;
color: #252525;
/*#6d6e71*/
height: 60px;
width: 60px;
position: absolute;
text-align: center;
}
#middleBubble img {
top: 0px !important;
left: 0px !important;
}
.mainImg {
width: 60px;
position: absolute;
margin: -60px;
}
.mainImg img {
width: 60px;
border-width: 0px;
border-style: solid;
border-color: rgba(0, 0, 0, 0);
border-radius: 600px;
overflow: hidden;
-webkit-transition: all 0.5s;
margin: 60px 0 0 60px;
}
.avatarList {
margin: 0px -60px;
display: inline-block;
/* border:1px black solid; */
width: 60px;
height: 60px;
background: orange;
border-radius: 60px;
}
.avatarList.expand .mainImg img {
border-color: rgba(0, 0, 0, 1);
border-width: 60px;
margin: 0;
}
#divCircle.expand {
display: block;
opacity: 1;
-webkit-transition: opacity 0.5s 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
<div>Click to pick avatar</div>
<br/>
<div class="avatarList">
<div class="mainImg">
<img src="http://png-1.findicons.com/files/icons/1072/face_avatars/300/i04.png">
</div>
<div id="divCircle">
<div id="middleBubble"></div>
<img src="http://png-1.findicons.com/files/icons/1072/face_avatars/300/a03.png">
<img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/c05.png">
<img src="https://gp5.googleusercontent.com/-esaz03FKsLU/AAAAAAAAAAI/AAAAAAAAAAA/kk0t9Rd9DB0/s48-c-k-no/photo.jpg">
<img src="http://www.veryicon.com/icon/png/Avatar/Face%20Avatars/Male%20Face%20G1.png">
<img src="http://icons.iconarchive.com/icons/hopstarter/face-avatars/256/Female-Face-FG-1-brunette-icon.png">
<img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/c05.png">
<img src="http://png-1.findicons.com/files/icons/1072/face_avatars/300/i04.png">
</div>
</div>
</div>
<!--body-->
这篇关于CSS3圆圈与可点击项目jQuery（径向菜单）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
