圆弧形内容切换
html:
<div class="box">
<div class="yuan">
<div class="yuan1">
<p>1</p>
</div>
<div class="yuan2">
<p>2</p>
</div>
<div class="yuan3">
<p>3</p>
</div>
<ul>
<li>内容1</li>
<li>内容2</li>
<li class="active">内容3</li>
</ul>
</div>
</div>
css:
.box {
margin: 100px;
}
p {
font-size: 20px;
text-align: center;
color: #fff;
line-height: 40px;
}
.yuan {
width: 600px;
height: 600px;
border-radius: 50%;
border-left: 2px solid #ccc;
position: relative;
}
.yuan .yuan1 {
position: absolute;
width: 40px;
height: 40px;
background: #ccc;
border-radius: 50%;
bottom: -20px;
left: 50%;
transform-origin: 20px -300px;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
}
.yuan .yuan1.active {
width: 80px;
height: 80px;
bottom: -40px;
transform-origin: 40px -300px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
.yuan .yuan1.active p {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.yuan .yuan2 {
position: absolute;
width: 40px;
height: 40px;
background: red;
border-radius: 50%;
top: -20px;
left: 50%;
transform-origin: 20px 320px;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
}
.yuan .yuan2.active {
width: 80px;
height: 80px;
top: -40px;
transform-origin: 20px 360px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.yuan .yuan2.active p {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
.yuan .yuan3 {
position: absolute;
width: 80px;
height: 80px;
background: blue;
border-radius: 50%;
bottom: 50%;
left: -40px;
transform-origin: 120px 0;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
}
.yuan .yuan3.active_b {
width: 40px;
height: 40px;
bottom: -20px;
transform-origin: 180px -140px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.yuan .yuan3.active_b p {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
.yuan .yuan3.active_t {
width: 40px;
height: 40px;
bottom: 100%;
transform-origin: 180px 200px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
.yuan .yuan3.active_t p {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
ul {
position: absolute;
width: 100%;
left: 0;
top: 200px;
}
ul li {
padding-left: 200px;
display: none;
font-size: 20px;
}
ul li.active {
display: block;
}
js:
$('.yuan1').mouseenter(function () {
if($(this).hasClass('active')){
$(this).removeClass('active');
$('.yuan3').removeClass('active_b');
$('ul li:nth-child(3)').addClass('active').siblings().removeClass('active');
}else{
$(this).addClass('active').siblings().removeClass('active');
$('.yuan3').addClass('active_b').removeClass('active_t');
$('ul li:nth-child(1)').addClass('active').siblings().removeClass('active');
}
});
$('.yuan2').mouseenter(function () {
if($(this).hasClass('active')){
$(this).removeClass('active');
$('.yuan3').removeClass('active_t');
$('ul li:nth-child(3)').addClass('active').siblings().removeClass('active');
}else{
$(this).addClass('active').siblings().removeClass('active');;
$('.yuan3').addClass('active_t').removeClass('active_b');
$('ul li:nth-child(2)').addClass('active').siblings().removeClass('active');
}
});