带有可点击项目的CSS3圆圈jQuery（径向菜单）[关闭]

【问题标题】：CSS3 circle with clickable items jQuery(Radial Menu) [closed]带有可点击项目的CSS3圆圈jQuery（径向菜单）[关闭]
【发布时间】：2015-01-14 23:46:35
【问题描述】：

我在哪里可以找到使用 css3 和 jQuery（用于导航）创建这样一个圆圈的示例
中心应该有文本（html）
当您单击（或悬停）下一个项目时，中心内容应该改变，背景颜色也会改变

【问题讨论】：

  • 几个小时前有人问过类似的问题。 ---->stackoverflow.com/questions/27943053/…。此外，使用svg 的路径文字功能，圆圈上的文字会更容易。
  • 这称为径向菜单。这应该有助于您的搜索。
  • 当我搜索径向菜单时，它得到完全不同的结果，并没有真正的帮助
  • 那你有阅读问题。 stackoverflow.com/search?q=radial+menu+css
  • 颠倒的文字是不好的 UX。

标签： jquery html css css-shapes


【解决方案1】：

forked from codepen

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

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

【讨论】：

    猜你喜欢
    • 2012-09-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode