[英]Rotate div clockwise or anticlockwise depending on current rotation
I have a set of buttons arranged in a circle, the button on the right hand side is the active
button and emits a pulse animation. 我有一组排列成圆形的按钮,右侧的按钮是
active
按钮并发出脉冲动画。 When another button is clicked, the containing div rotates so that the button you click is on the right, and becomes the active
button 单击另一个按钮时,包含的div将旋转,以便您单击的按钮位于右侧,并成为
active
按钮
This is done using CSS transform: rotate(x);
这是使用CSS
transform: rotate(x);
and transition
和
transition
When I click the images below labelled 'C' I want the div to rotate clockwise, and 'A' anticlockwise. 当我点击下面标有'C'的图像时,我希望div顺时针旋转,'A'逆时针旋转。 But this doesn't happen because of how I've done the CSS rotations, let's say the circle has rotated -300deg and then changes to a 180deg rotation, it will spin 'the long way round' instead of taking the shortest route.
但是这不会发生,因为我已经完成了CSS旋转,假设圆圈旋转了-300度然后变为180度旋转,它将旋转“长距离旋转”而不是采用最短路径。
I need to rotate the div using JavaScript, then just add or subtract values from the rotation depending on what button I click. 我需要使用JavaScript旋转div,然后根据我点击的按钮添加或减去旋转中的值。 I've tried looking for ways to do this, but no luck so far.
我已经尝试过寻找方法,但到目前为止还没有运气。
You can add data-rotate
attributes to the buttons. 您可以向按钮添加
data-rotate
属性。 Their values will be used add or subtract from the current rotate value. 它们的值将用于当前旋转值的加或减 。
Default HTML: 默认HTML:
<div class="col-lg" id="wheel-container">
<div class="wheel" data-state="1">
<ul>
<li><div><a class="btn active" data-icon="1"><div></div></a></div></li>
<li><div><a class="btn" data-icon="2" data-rotate="-60"><div></div></a></div></li>
<li><div><a class="btn" data-icon="3" data-rotate="-120"><div></div></a></div></li>
<li><div><a class="btn" data-icon="4" data-rotate="180"><div></div></a></div></li>
<li><div><a class="btn" data-icon="5" data-rotate="120"><div></div></a></div></li>
<li><div><a class="btn" data-icon="6" data-rotate="60"><div></div></a></div></li>
</ul>
</div>
</div>
Remove this part of CSS. 删除这部分CSS。 You no longer need it:
你不再需要它:
/* .wheel[data-state="1"] {
transform: rotateZ(0deg);
}
.wheel[data-state="2"] {
transform: rotateZ(-60deg);
}
.wheel[data-state="3"] {
transform: rotateZ(-120deg);
}
.wheel[data-state="4"] {
transform: rotateZ(180deg);
}
.wheel[data-state="5"] {
transform: rotateZ(120deg);
}
.wheel[data-state="6"] {
transform: rotateZ(60deg);
} */
Now, the jQuery code. 现在,jQuery代码。 It checks the
data-rotate
value of the clicked element to add/subtract the value from rotate
variable. 它检查单击元素的
data-rotate
值,以从rotate
变量中添加/减去该值。 Then, it checks the position, and redistributes the values for each data-rotate
appropriately. 然后,它检查位置,并为每个
data-rotate
重新分配值data-rotate
适当地data-rotate
。
var btns = $('.btn');
var rotate = 0;
$('.btn').on('click', function(e){
e.preventDefault();
if ($(this).hasClass('active')) {
//Do nothing
} else {
var rotateAdd = Number($(this).data('rotate'));
rotate += rotateAdd;
$('.wheel').css({'transform' : 'rotate(' + rotate + 'deg)'});
// get n value
var icon = $(this).data('icon');
var n = icon - 1;
// loop to rearrange the values
for (var i = 1; i < btns.length; i++) {
n++;
if (n === btns.length) {
n = 0;
}
// apply rotate data again
if (i == 1) {
$(btns[n]).data('rotate', '-60');
} else if (i == 2) {
$(btns[n]).data('rotate', '-120');
} else if (i == 3) {
$(btns[n]).data('rotate', '180');
} else if (i == 4) {
$(btns[n]).data('rotate', '120');
} else if (i == 5) {
$(btns[n]).data('rotate', '60');
}
}
// Hide other dropdowns
$('.active').removeClass('active');
// Open this dropdown
$(this).addClass('active');
}
});
working snippet : 工作片段:
var btns = $('.btn'); var rotate = 0; $('.btn').on('click', function(e) { e.preventDefault(); if ($(this).hasClass('active')) { //Do nothing } else { var rotateAdd = Number($(this).data('rotate')); rotate += rotateAdd; $('.wheel').css({ 'transform': 'rotate(' + rotate + 'deg)' }); // get n value var icon = $(this).data('icon'); var n = icon - 1; // loop to rearrange the values for (var i = 1; i < btns.length; i++) { n++; if (n === btns.length) { n = 0; } // apply rotate data again if (i == 1) { $(btns[n]).data('rotate', '-60'); } else if (i == 2) { $(btns[n]).data('rotate', '-120'); } else if (i == 3) { $(btns[n]).data('rotate', '180'); } else if (i == 4) { $(btns[n]).data('rotate', '120'); } else if (i == 5) { $(btns[n]).data('rotate', '60'); } } // Hide other dropdowns $('.active').removeClass('active'); // Open this dropdown $(this).addClass('active'); } });
#wheel-container { flex: 1 1 100%; max-width: 100%; position: relative; } .wheel { width: calc(50vw - 1.875rem); position: relative; margin: auto; } .wheel ul { list-style: none; padding: 0; margin: 0; width: 100%; padding-top: 100%; position: relative; } .wheel ul li { padding: 0; margin: 0; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform-origin: 0 50%; } .wheel ul li>div { width: 100%; height: 100%; position: relative; } .wheel ul li [data-icon] { width: 50%; height: 50%; border-radius: 50%; position: absolute; right: 0; top: 50%; transform-origin: 50% 50%; transform: translateY(-50%); cursor: pointer; padding: 0; } .wheel ul li [data-icon]>div { width: 100%; height: 100%; position: relative; overflow: visible; z-index: -10; } .wheel ul li [data-icon]>div::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; } .wheel ul li [data-icon].active>div::before { content: ''; position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; background: rgba(0, 173, 239, 0.5); transform: translate(-50%, -50%); animation-name: pulse; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 3s; animation-direction: alternate; border-radius: 50%; } @keyframes pulse { 0% { width: 100%; height: 100%; opacity: 0; } 50% { width: calc(100% + 1rem); height: calc(100% + 1rem); opacity: 1; } 100% { width: 100%; height: 100%; opacity: 0; } } .wheel ul li:nth-child(1) { transform: translateY(-50%); } .wheel ul li:nth-child(2) { transform: translateY(-50%)rotateZ(60deg); } .wheel ul li:nth-child(3) { transform: translateY(-50%)rotateZ(120deg); } .wheel ul li:nth-child(4) { transform: translateY(-50%)rotateZ(180deg); } .wheel ul li:nth-child(5) { transform: translateY(-50%)rotateZ(240deg); } .wheel ul li:nth-child(6) { transform: translateY(-50%)rotateZ(300deg); } .wheel[data-state] { transition: transform 1s ease-in-out; transform-origin: 50% 50%; } .wheel[data-state="1"] { transform: rotateZ(0deg); } .wheel[data-state="2"] { transform: rotateZ(-60deg); } .wheel[data-state="3"] { transform: rotateZ(-120deg); } .wheel[data-state="4"] { transform: rotateZ(180deg); } .wheel[data-state="5"] { transform: rotateZ(120deg); } .wheel[data-state="6"] { transform: rotateZ(60deg); } .wheel ul li:nth-child(1) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; } .wheel ul li:nth-child(2) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; transform: rotateZ(-60deg); } .wheel ul li:nth-child(3) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; transform: rotateZ(-120deg); } .wheel ul li:nth-child(4) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; transform: rotateZ(-180deg); } .wheel ul li:nth-child(5) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; transform: rotateZ(-240deg); } .wheel ul li:nth-child(6) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; transform: rotateZ(-300deg); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg" id="wheel-container"> <div class="wheel" data-state="1"> <ul> <li> <div> <a class="btn active" data-icon="1"> <div></div> </a> </div> </li> <li> <div> <a class="btn" data-icon="2" data-rotate="-60"> <div></div> </a> </div> </li> <li> <div> <a class="btn" data-icon="3" data-rotate="-120"> <div></div> </a> </div> </li> <li> <div> <a class="btn" data-icon="4" data-rotate="180"> <div></div> </a> </div> </li> <li> <div> <a class="btn" data-icon="5" data-rotate="120"> <div></div> </a> </div> </li> <li> <div> <a class="btn" data-icon="6" data-rotate="60"> <div></div> </a> </div> </li> </ul> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.