我正在尝试使用(主要是)CSS生成一个“漂亮”的CSS菜单,但也需要少量的jQuery:
我的总体想法是:
+------------------------+
| |
| |
| +---+ |
| | | |
| |___| | <-- Hover this center piece
| |
| |
| |
+------------------------+
+------------------------+
| _ |
| |\ | <-- All start moving up to top of screen
| \ +---+ |
| | | |
| |___| |
| |
| |
| |
+------------------------+
+------------------------+
| +---+ |
| | | |
| |___| |
| |
| || All, but one |
| || moves down |
| \/ |
| |
+------------------------+
+------------------------+
| +---+ |
| | | |
| |___| |
| |
| One stays, |
| +---+ the rest move this way
| | | ---> |
| |___| |
+------------------------+
+------------------------+
| +---+ |
| | | |
| |___| ^ | The rest move up
| | |
| | |
| +---+ +---+ |
| | | | | |
| |___| |___| |<-- Another stays
+------------------------+
完成:
+------------------------+
| +---+ +---+ |
| | 1 | | 4 | |
| |___| |___| |
| |
| |
| +---+ +---+ |
| | 2 | | 3 | |
| |___| |___| |
+------------------------+
然而,这假设有四个div子元素,所以我正在尝试生成一种在jQuery中“确定角度/位置”的方法(说实话,并不太奏效)。
类似的设计:
因此,最终由于有四个div,它们将与中心点相隔90度(360/4 div = 相距90度)。
如果有六个子div:
360/6 = 60 degrees
因此,它们将均匀分布在60度间隔处。
我还会在它们之间添加动画,所以我一直在尝试旋转等,但我似乎无法掌握:
我的当前示例是:
$(".wrap").hover(function(){
var x =$(this).children().length; //Counts '.circles'
var degree = 360 / x; //Gets angle
var percent = 100 / x;
var curPercent = percent;
$(this).children().each(function (index) {
$(this).css("transform","rotate(" + degree*index + "deg)");
$(this).css("top",percent + "px");
$(this).css("left",percent + "px");
percent = percent + curPercent;
});
});
.wrap{
height: 300px;
width: 300px;
background: red;
position: relative;
transform-origin: center center;
transition: all 0.8s;
}
.wrap:hover .circle{
top: 0;
left: 0;
}
.circle{
transition: all 0.8s;
position: absolute;
height: 50px;
width: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
background: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
有人能:
(A):知道如何使div相对于在jQuery代码中指定的父元素旋转指定的角度或距离吗?
(B):使'animation'在鼠标移出时重置吗?
- (C):
有任何想法我在说什么吗?
类似的实现(虽然不完全相同):