Question

在哪里可以找到一个用css3和jQuery（用于导航）创建这样的圆的示例
中心应该有文字（html）单击（或悬停）下一个项目时，中心内容应更改，并且还应更改背景颜色

enter image description here

Answer 1

＆＃13;

/**
 * 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; } }

＆＃13;

<!-- 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>

＆＃13;

甚至是this one

＆＃13;

$(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);
});

＆＃13;

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;
}

＆＃13;

<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-->

＆＃13;

带有可点击项的CSS3圈jQuery（径向菜单）

1 个答案: