我有一个div,其中添加了两个范围和一个按钮,这些范围用于向左旋转div和向右旋转div。 右边的跨度称为“向右旋转”,左边的跨度称为“向左旋转”,它们是父div的子级,称为table。
<div id="table1" class="table square4 ui-draggable ui-draggable-handle" +="" style="inset:69px auto auto 445px;">
<div class="removet"></div>
<span class="fa fa-edit editdiv"></span>
<span class="fa fa-rotate-left rotateleft"></span>
<span class="fa fa-rotate-right rotateright"></span>
</div>
这将导致以下div。
这也是该表的CSS,以防万一该表的CSS与我的Transform语句冲突。
.square4 {
cursor: move;
width: 133px;
height: 133px;
position: absolute !important;
background-image: url(parts/table4.png);
background-repeat: no-repeat;
background-position: center center;
font-size: 17px;
font-weight: bold;
color: #00f;
border: 1px solid #ccc;
border-radius: 6%;
-moz-border-radius: 6%;
-webkit-border-radius: 6%;
left: 741px;
top: -141px;
}
当用户单击向左或向右时,父div应该旋转15度,但是当我单击向右旋转时,什么也没有发生,当我单击向左旋转时,它将度数设置为旋转0,这是第一个vlaue而不是我需要的价值。我将值设置为0到360度之间的数组,每次单击右旋转时它们都会增加15度,如果单击左旋转则它们会返回15度。
使用jQuery UI将div附加到称为mainarea的可放置元素上,这就是为什么我使用.on单击的原因。检测到单击,它只是我遇到问题的转换。
我检查了Array,并单击了按钮以确保它们正常工作,我使用console.log检查angle [current]并返回了正确的值,我认为这与我的transform语句有关,并且我如何设置它,我尝试了不同的方法,但没有运气。
我正在使用Elementor,所以我的document.ready与通常的方式有所不同,但这是因为Elementor的工作方式,如果您想对其进行测试,可以将其更改为文档就绪语句,但是我想显示我的确切代码。
document.addEventListener("DOMContentLoaded", function(event)
{
var angle = [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240, 255, 270, 285, 300, 315 , 330, 345, 360];
var current = 0;
jQuery(document).on('click','.table > .rotateright',function(event)
{
current++;
if(current == 25)
{
current = 0;
}
var r = jQuery(this).parents('.table').attr('id');
var rotating = '#'.concat(r);
console.log(angle[current]);
jQuery(rotating).css({
'-webkit-transform' : 'rotate(' + angle[current] + ')',
'-moz-transform' : 'rotate(' + angle[current] + ')',
'-ms-transform' : 'rotate(' + angle[current] + ')',
'-o-transform' : 'rotate(' + angle[current] + ')',
'transform' : 'rotate(' + angle[current] + ')'
});
});
jQuery(document).on('click','.table > .rotateleft',function(event)
{
current--;
if(current == -1)
{
current = 24;
}
var r = jQuery(this).parents('.table').attr('id');
var rotating = '#'.concat(r);
console.log(angle[current]);
jQuery(rotating).css({
'-webkit-transform' : 'rotate(' + angle[current] + ')',
'-moz-transform' : 'rotate(' + angle[current] + ')',
'-ms-transform' : 'rotate(' + angle[current] + ')',
'-o-transform' : 'rotate(' + angle[current] + ')',
'transform' : 'rotate(' + angle[current] + ')'
});
});
});
答案 0 :(得分:1)
在分配新的旋转CSS时,您错过了CSS中的'deg'('+ angle [current] +'deg)
我仅修改了向右旋转的代码(我没有更改向左的代码,可以像向右一样更改),这里see jsfiddle
小片段如下
$('#table1').css({
' -webkit-transform': 'rotate('+ angle[current]+' deg)',
'-moz-transform': 'rotate('+ angle[current]+' deg)',
'-o-transform': 'rotate('+ angle[current]+'deg)',
'-ms-transform': 'rotate('+ angle[current]+'deg)',
'transform': 'rotate('+ angle[current]+'deg)'}
);
,正确的跨度将其保持在目标div之外,因为它将随着主div的旋转而旋转