0
嘿,我正在嘗試以最一般的方式創建一個徑向菜單。 我發現徑向菜單這裏的一個例子: http://codepen.io/suez/pen/vAais 我有翻譯SCSS的CSS ,我已經試圖刪除硬派的CSS像下面使用JavaScript創建一個徑向菜單
.rotater:nth-child(1) {
transform: rotate(-20deg);
}
並將其轉換爲這樣的jQuery代碼:
var rotateDegreeOne = -20;
for(var i=1;i<10;i++){
$('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');
rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
}
這個工作正常,但是當我嘗試以下CSS轉換爲jQuery代碼,我面臨着一個問題:
.menu.active .rotater:nth-child(1) .btn-icon {
transform: translateY(-10em) rotate(20deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
transform: translateY(-10em) rotate(-20deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
transform: translateY(-10em) rotate(-60deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
transform: translateY(-10em) rotate(-100deg);
}
.menu.active .rotater:nth-child(5) .btn-icon {
transform: translateY(-10em) rotate(-140deg);
}
.menu.active .rotater:nth-child(6) .btn-icon {
transform: translateY(-10em) rotate(-180deg);
}
.menu.active .rotater:nth-child(7) .btn-icon {
transform: translateY(-10em) rotate(-220deg);
}
.menu.active .rotater:nth-child(8) .btn-icon {
transform: translateY(-10em) rotate(-260deg);
}
.menu.active .rotater:nth-child(9) .btn-icon {
transform: translateY(-10em) rotate(-300deg);
}
其轉換爲下面的代碼:
var rotateDegreeTwo = 20;
var rotateDifferenceTwo = -40;
for(var i=1;i<10;i++){
$('.menu.active .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
}
的問題是,這上面的代碼是不是在所有的工作,不產生上述CSS代碼。
我依戀的代碼的現狀:
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
var rotateDegreeOne = -20;
var rotateDegreeTwo = 20;
var rotateDifferenceOne = 40;
var rotateDifferenceTwo = -40;
for(var i=1;i<10;i++){
$('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');
$('.menu.active .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
}
});
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
background: linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
}
.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
opacity: 0;
z-index: -10;
cursor: pointer;
transition: opacity 1s, z-index 0.3s, transform 1s;
transform: translateX(0);
}
.menu .btn .fa {
font-size: 3em;
transition: color 0.3s;
}
.menu .btn:hover .fa {
color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
transition: transform 0.3s;
}
.menu .btn.trigger:hover {
transform: scale(1.2);
}
.menu .btn.trigger:hover .line {
background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger .line {
width: 60%;
height: 6px;
background: #000;
border-radius: 6px;
transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 6px;
background: #000;
border-radius: 6px;
transition: background-color 0.3s, transform 0.3s;
}
.menu .btn.trigger .line:before {
top: -12px;
transform-origin: 15% 100%;
}
.menu .btn.trigger .line:after {
top: 12px;
transform-origin: 25% 30%;
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.menu.active .trigger .line {
height: 0px;
top: 45%;
}
.menu.active .trigger .line:before {
transform: rotate(45deg);
width: 110%;
}
.menu.active .trigger .line:after {
transform: rotate(-45deg);
width: 110%;
}
/*.menu.active .rotater:nth-child(1) .btn-icon {
transform: translateY(-10em) rotate(20deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
transform: translateY(-10em) rotate(-20deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
transform: translateY(-10em) rotate(-60deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
transform: translateY(-10em) rotate(-100deg);
}
.menu.active .rotater:nth-child(5) .btn-icon {
transform: translateY(-10em) rotate(-140deg);
}
.menu.active .rotater:nth-child(6) .btn-icon {
transform: translateY(-10em) rotate(-180deg);
}
.menu.active .rotater:nth-child(7) .btn-icon {
transform: translateY(-10em) rotate(-220deg);
}
.menu.active .rotater:nth-child(8) .btn-icon {
transform: translateY(-10em) rotate(-260deg);
}
.menu.active .rotater:nth-child(9) .btn-icon {
transform: translateY(-10em) rotate(-300deg);
}*/
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" name="fa-codepen">
<i class="fa fa-codepen" name="fa-codepen"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-facebook"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-google-plus"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-dribbble"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-linkedin"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-github"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-behance"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-behance"></i>
</div>
</div>
</div>
</div>