2

我有两个div（即div1和div2），div1逆时针旋转，其他div2顺时针旋转。现在我希望两个 div 在每 5 秒后连续改变它们的旋转方向，就像 div1 在 5 秒后顺时针旋转它逆时针旋转，然后在 5 秒后顺时针方向旋转，依此类推。相同的过程应用于另一个 div..

<div id="div1" style="height:100px; width:100px; border:2px solid gray">div1 </div>
<div id="div2" style="margin-top:100px; height:100px; width:100px; border:2px solid Red">div2</div>

<script>
     rotate(0,0);
     function rotate(degree1, degree2) {
            $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' });
            $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' });
            $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
            $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
            timer = setTimeout(function () {
                rotate(++degree1, --degree2);
                }, 5);
            } 
</script>
4

3 回答 3

4

如果我正确理解了您的问题，这就是您需要的代码（这是一个示例小提琴）：

var invert = false;
startRotating();
function startRotating() {
    rotate(0, 0);
    setTimeout(invertRotate, 5000);
}
function invertRotate() {
    invert = !invert;
    setTimeout(invertRotate, 5000);
}
function rotate(degree1, degree2) {
    $("#div1").css({
        WebkitTransform: 'rotate(' + degree1 + 'deg)'
    });
    $("#div2").css({
        WebkitTransform: 'rotate(' + degree2 + 'deg)'
    });
    $("#div1").css({
        '-moz-transform': 'rotate(' + degree1 + 'deg)'
    });
    $("#div2").css({
        '-moz-transform': 'rotate(' + degree2 + 'deg)'
    });
    setTimeout(function () {
        invert ? rotate(++degree1, --degree2) : rotate(--degree1, ++degree2);
    }, 5);
}
于 2013-06-22T14:06:53.507 回答
0 
<div id="div1" style="height:100px; width:100px; border:2px solid gray">div1 </div>
<div id="div2" style="margin-top:100px; height:100px; width:100px; border:2px solid Red">div2</div>

<script>
     rotate(0,0,0);
     function rotate(degree1, degree2, timepassed) {
            $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' });
            $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' });
            $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
            $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
            var orientation = 1 - (Math.round(timepassed/5000)%2)*2;
            setTimeout(function () {
                rotate(degree1 + orientation, degree2 - orientation, timepassed+5);
                }, 5);
            } 
</script>

你必须打发过去的时间。另一种方法是从起点开始计算。

于 2013-06-22T14:09:38.933 回答
0 
 var counter = 0; var reverse = false;
    rotate(0,0);
    function rotate(degree1, degree2) {
        $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' });
        $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' });
        $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
        $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
        timer = setTimeout(function () {
            counter += 5;
            if (counter == 5000) { counter = 0; reverse = reverse ? false : true;}
            if (reverse) rotate(--degree1, ++degree2);
            else rotate(++degree1, --degree2);
        }, 5);
    }

使用全局计数器和布尔值。当计数器达到时间目标时，切换布尔值。根据布尔值调用您的旋转函数。

于 2013-06-22T14:10:14.523 回答