我正在制作一个网页,其中包含一个中心带有箭头的时钟。当用户点击一个小时时,箭头会旋转以指向他/她点击的内容。
我正在使用 jQuery 图像旋转插件 (jQueryRotate) 来旋转箭头。
这是计算旋转度数的当前代码:
var numTiles = $("ul li").size(); // Number of tiles is however many are listed in the UL, which is 12
var sel = 0; // Default hour selection
var rot = 0; // Default rotation is at the top (0 degrees)
var gap = 360 / numTiles; // Degrees between each tile
function rotateArrow(num) {
rot = num * gap;
$("#arrow").rotateAnimation(rot);
sel = num;
}
当用户单击其中一个小时时,它会将 num 作为 1 到 12 的值传递。
它工作正常,但问题是如果箭头指向 1 点,并且用户单击 11 点,箭头顺时针旋转 300 度,逆时针旋转 60 度更有意义.
那么,我如何编写一个方程式来获取当前小时数 (num) 和单击的小时数 (sel),并输出一个正数或负数的值,该值等于最有效的旋转度数,而不是只在一个方向旋转?
欢迎任何建议。如果您有任何问题,请告诉我。谢谢!
最佳答案
基本上最近的旋转总是小于 180 度,所以如果你的 Angular 大于 180,只需从中减去 360 得到负 Angular 。以你自己为例,如果你最终得到 300 度,减去 360 得到 -60 度。
所以要添加到您当前的代码行:
rot = num * gap;
你只需要:
if (rot > 180)
rot -= 360;
关于javascript - 如何顺时针或逆时针旋转图像,以较短者为准?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4310311/