我的代码中有一些我无法弄清楚的数学问题。
当您按下其中一个红色圆圈时,它应该采用最近的路径(左或右)并向下旋转到底部,它有点工作,但它有一些问题。
例如,如果您先按"8"然后按"3",则容器仅沿错误方向旋转 45 度。
第二个问题是,当轮子旋转时,数字在旋转。
这是代码的jsfiddle:https://jsfiddle.net/she4x2w6/10/
$('.item').click(function() {
var currentId = $('#container').data('id');
var nextId = $(this).data('id');
var currentRotation = (360 / items.length) * currentId - (360 / items.length);
var nextRotation = (360 / items.length) * nextId - (360 / items.length);
var deg;
if (currentRotation - nextRotation > 180 || nextRotation - currentRotation > 180) {
deg = nextRotation > 180 ? 360 - nextRotation : nextRotation - 360;
} else {
deg = -Math.abs(nextRotation);
}
var itemDeg = nextRotation <= 180 ? nextRotation : -Math.abs(360 - nextRotation);
$('#container').css({
transition: 'transform 0.6s',
transform: 'rotate(' + deg + 'deg)'
})
$('.item').css({
transition: 'transform 0.6s',
transform: 'rotate(' + itemDeg + 'deg)'
})
CSS rotate() 函数将元素旋转到给定的角度,同时您尝试将元素旋转给定角度。
rotate() -CSS |多核
我不得不改变你的一些方法才能让它工作:
var radius = 100; // adjust to move out items in and out
var items = $('.item'),
container = $('#container'),
width = container.width(),
height = container.height();
var angle = 0,
step = (2 * Math.PI) / items.length,
angle = Math.PI/2;
items.each(function() {
var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
$('#container').data('deg', 0);
$('.item').click(function() {
var currentId = $('#container').data('id');
var nextId = $(this).data('id');
var currentDeg =$('#container').data('deg');
var deg;
var degg = ((nextId+items.length-1)%items.length)*(360 / items.length);
if (degg>=180) {
deg = 360-degg;
} else {
deg = -degg;
}
var t = (currentDeg - deg) % 360;
if (t<0) {
t = 360+t;
}
if (t<180) {
deg = currentDeg-t;
} else {
deg = currentDeg+360-t;
}
var itemDeg = -deg;
var time = Math.abs(deg-currentDeg)/100;
$('#container').css({
transition: 'transform ' + time + 's',
transform: 'rotate(' + deg + 'deg)'
})
$('.item').css({
transition: 'transform ' + time + 's',
transform: 'rotate(' + itemDeg + 'deg)'
})
$('#container').data('id', nextId).data('deg', deg);
});
body {
padding: 2em;
}
#container {
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid #000;
position: relative;
border-radius: 50%;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
position: absolute;
background: #f00;
}
.item p {
margin: 0;
}
.active .item-content {
opacity: 1 !important;
transition: opacity ease 0.6s;
}
.item .item-content {
opacity: 0;
transition: opacity ease 0.3s;
margin: auto;
position: absolute;
width: 230px;
transform: translate(-50%);
left: 50%;
pointer-events: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-id="1">
<div data-id="1" class="item">1</div>
<div data-id="2" class="item">2</div>
<div data-id="3" class="item">3</div>
<div data-id="4" class="item">4</div>
<div data-id="5" class="item">5</div>
<div data-id="6" class="item">6</div>
<div data-id="7" class="item">7</div>
<div data-id="8" class="item">8</div>
<div data-id="9" class="item">9</div>
</div>