围绕着圆旋转，设定度和位置。
围绕着圆旋转，设定度和位置。
提问于 2014-06-18 05:18:08
我一直在努力让div围绕一个圆旋转到一个设定的点。
- 这里是Fiddle: http://jsfiddle.net/TMuD5/2/
然而，我似乎已经达到我的技能水平的极限。我只是JS/JQuery的三年级学生，所以请温柔一点。
如果你看看Fiddle，你会在底部看到四个链接。如果您单击第一个，即旋转框，一个空格向左。效果很好。然而，它只工作一次。我用过：
$("#box" + i).data('position', degreeRot);将当前位置添加到数据属性，但它似乎不起作用。我甚至不建议按正确的按钮。
所以，我有几个问题，如果你不介意帮我的话。
- 1)为什么不将新的度添加到数据位置属性？我怎样才能让它继续运转，一次一次。
- 2) --我用-=把盒子往右转，但它们没有。为什么会这样呢？
- 3)如何让它一次移动2或3个空格？
提前谢谢你。我非常感谢所有的帮助和建议:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-06-18 06:12:58
您的代码有很多错误，但特别是，我认为您使用左/右的东西使它复杂化了。只需使用正数或负数值表示要旋转的数量：
<p class="worldMenuPosition " data-spaces="-1" id="box1">Rotate one space left</p>
<p class="worldMenuPosition" data-spaces="1" id="box2">Rotate 1 space right</p>
<p class="worldMenuPosition " data-spaces="-2" id="box1">Rotate two spaces left</p>
<p class="worldMenuPosition" data-spaces="2" id="box2">Rotate 2 spaces right</p>一旦您切换到该方法，代码可以逐步重构如下：
$(document).ready(function () {
var currentRotation = -35,
rotationIncrement = 35;
$(".worldMenuPosition").click(function () {
var spaces = $(this).data("spaces");
rotateToDirection(spaces * rotationIncrement);
});
function rotateToDirection(deg) {
currentRotation += deg;
positionBoxes();
}
function rotateTo(deg, box) {
var bplate = ["translate(-50%,-50%) rotate(", deg,
"deg) translateY(-200px) rotate(", -5, "deg)"];
$(box).css({
"transform": bplate.join("")
});
}
function positionBoxes() {
$(".worldSection").each(function (index, element) {
rotateTo(currentRotation + (index * rotationIncrement), element);
});
}
// Initialize positions
positionBoxes();
});您要求解释这些bug，下面是一些解释。
如果我们只看代码的“左”分支，那么每次单击“左一个空格”按钮时，它都会更改所有4个按钮的data-position。当您第一次单击“一个空格左”按钮时，它会将所有东西都旋转到左侧35度，并更新所有4个按钮的data-position属性，以便在单击“一个空格左”按钮时遍历这些值序列：
box1 - -70, -35, 0, 35, 70, ...
box2 - 0, 70, 140, 210, 280, ...
box3 - -70, 35, 140, 245, 350, ...
box4 - 0, 140, 280, 420, 560, ...所以，当你下一次点击“左一个空间”时，它会把这个束旋转到-35度的位置(右边是一个空间)，然后是0度，然后是35度等等。所以，每点击一次，系统就会向右旋转35度。
代码的“右”分支也有类似的问题，但更糟糕的是，每次迭代都要减去35。这将导致所有的框改变位置并向左旋转。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24286645
复制
相似问题
使用特权帐户重置AD用户帐户密码
在Meteor帐户中重置密码后禁用登录-密码
用户在更改密码后将被注销。
编辑用户的帐户详细信息
Django:帐户创建后密码重置的无效令牌
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
