Question

在我已经工作了很长一段时间的项目中，我遇到了麻烦。客户希望在他的首页上有一个可旋转的表盘，如安全的组合表盘或音量旋钮。

旋钮有4个端值，对象捕捉到最近的值。我遇到的问题是，一旦达到相应的值，我就不知道如何让JS在某个元素上切换隐藏/显示。

例如，在90度旋转时，我想要显示元素X.在180度旋转时，我希望元素X隐藏，Y要取代它/放置它。对Z和A重复90度增量。

我当前的代码尝试（在众多代码中）看起来像这样

var dialarray = [0,90,180,270]; 

var rotationSnap = 90;
Draggable.create("#Stage_Group", {
    type:"rotation", //instead of "x,y" or "top,left", we can simply do "rotation" to make the object spinnable! 
    throwProps:true, //enables kinetic-based flicking (continuation of movement, decelerating after releasing the mouse/finger)
    snap:function(endValue) { 
        //this function gets called when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected.
        return Math.round(endValue / rotationSnap) * rotationSnap;

if (rotation("#Stage_Group") = 90) {
    sym.$("brand_awareness").show();
} else {
    sym.$("brand_awareness").hide();
}
}
})

我使用Greensocks，缺乏支持来得到正确的答案，所以在一位更熟悉代码的朋友的帮助下（他也没有弄明白）我转向StackOverflow

有人可以指导我解决这个问题吗？它驱使我疯狂，即使它意味着放弃当前代码的工作代码也会这样做，也许我忽略了另一个更合理的解决方案，即制作一个具有特定值的触发器的可旋转对象？

提前致谢！

Answer 1

这将是你的快照中的代码。更新了您的评论

var imgRotation = Math.round(endValue / rotationSnap) * rotationSnap;
if (imgRotation == 90) {
   sym.$("id1").show();
} else if (imgRotation == 180) {
   sym.$("id2").show();
} else if (imgRotation == 270 ) {
   sym.$("id3").show();
}
else if ((imgRotation >= 360) || (imgRotation == 0)){
   sym.$("id4").show();
}
return imgRotation;

Draggable.create - 想要在某些数组/结束值上显示/隐藏切换

1 个答案: