作者:蔡志哲皇宇 | 来源:互联网 | 2023-05-22 10:23
我尝试使用(主要)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;
}
小提琴
有人会:
(A):知道如何让div'旋转'与jQuery代码中指定的父相关的指定角度或距离?
(B):在悬停时重置"动画"?
(C):知道我在说什么吗?
类似的实现(虽然不完全):
这里
这更是如此 - 但这使用Sass(不想要)
Jasny - Arno..
57
使用不同的方法,您将获得略有不同的效果.您可以使用时间setTimeout
和transition
修改行为.
看小提琴
+ function() {
var to;
$(".wrap").on('mouseenter', function() {
var circles = $(this).children();
var degree = (2 * Math.PI) / circles.length; //calc delta angle
var transforms = [];
// Calculate the position for each circle
circles.each(function(index) {
var x = 100 * Math.cos(-0.5 * Math.PI + degree * (-1 * index - 0.5));
var y = 100 * Math.sin(-0.5 * Math.PI + degree * (-1 * index - 0.5));
transforms.push('translate(' + x + 'px,' + y + 'px)');
});
// Function to moves all the circles
// We'll pop a circle each time and than call this function recursively
function moveCircles() {
var transform = transforms.shift();
circles.css('transform', transform);
circles.splice(0, 1);
if (circles.length) to = setTimeout(moveCircles, 400);
}
moveCircles();
});
$(".wrap").on('mouseleave', function() {
var circles = $(this).children().css('transform', '');
clearTimeout(to);
});
}();
.wrap {
height: 300px;
width: 300px;
background: red;
position: relative;
transform-origin: center center;
transition: all 0.8s;
}
.circle {
transition: all 0.8s;
position: absolute;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
background: tomato;
border-radius: 50%;
}
1> Jasny - Arno..:
使用不同的方法,您将获得略有不同的效果.您可以使用时间setTimeout
和transition
修改行为.
看小提琴
+ function() {
var to;
$(".wrap").on('mouseenter', function() {
var circles = $(this).children();
var degree = (2 * Math.PI) / circles.length; //calc delta angle
var transforms = [];
// Calculate the position for each circle
circles.each(function(index) {
var x = 100 * Math.cos(-0.5 * Math.PI + degree * (-1 * index - 0.5));
var y = 100 * Math.sin(-0.5 * Math.PI + degree * (-1 * index - 0.5));
transforms.push('translate(' + x + 'px,' + y + 'px)');
});
// Function to moves all the circles
// We'll pop a circle each time and than call this function recursively
function moveCircles() {
var transform = transforms.shift();
circles.css('transform', transform);
circles.splice(0, 1);
if (circles.length) to = setTimeout(moveCircles, 400);
}
moveCircles();
});
$(".wrap").on('mouseleave', function() {
var circles = $(this).children().css('transform', '');
clearTimeout(to);
});
}();
.wrap {
height: 300px;
width: 300px;
background: red;
position: relative;
transform-origin: center center;
transition: all 0.8s;
}
.circle {
transition: all 0.8s;
position: absolute;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
background: tomato;
border-radius: 50%;
}
2> huysentruitw..:
function rotateStep($this, $circle, angle) {
$this.animate({
rotation: angle
}, {
step: function(now, fx) {
$this.css({
transform: 'rotate(' + now + 'deg)'
});
$circle.css({
transform: 'translate(-50%, -50%) rotate(' + -now + 'deg)'
});
}
});
}
$('.wrap').hover(function() {
var $this = $(this),
$circleWrappers = $this.find('.circleWrapper'),
angleOffset = 360 / $circleWrappers.length,
angle = - angleOffset / 2,
distance = Math.min($this.width(), $this.height()) / 2;
$circleWrappers.each(function() {
var $this = $(this),
$circle = $(this).find('.circle');
$circle.animate({ top: -distance });
rotateStep($this, $circle, angle);
angle -= angleOffset;
});
}, function() {
var $this = $(this),
$circleWrappers = $this.find('.circleWrapper');
$circleWrappers.each(function() {
var $this = $(this),
$circle = $(this).find('.circle');
$circle.animate({ top: 0 });
rotateStep($this, $circle, 0);
});
});
.wrap {
position: relative;
background-color: #cccccc;
width: 400px;
height: 400px;
transition:all 0.8s;
transform-origin: center center;
}
.circleWrapper {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
}
.circle {
position: absolute;
width: 80px;
height: 80px;
border-radius: 40px;
background-color: white;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
line-height: 80px;
text-align: center;
font-family: arial;
font-size: 42px;
font-weight: bold;
transform: translate(-50%, -50%);
}