Question

我是javascript的新手。现在我正在尝试编写一个代码，以相反的方向旋转两个图像。您可以看到代码here。

HTML：

<body>  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  <img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>

</body>

CSS：

body{
background:#fff;
}
body > img{
width:200px;
}
.leftwheel {
float:left;
}
.rightwheel {
    float:right;
}

使用Javascript：

$(function() {

    var $rotaLeft = $(' .leftwheel'),
    var $rotaRight = $(' .rightwheel'),
        degreeRight = 0,
        degreeLeft = 0,
        timerLeft,
        timerRight;

    function rotateLeft() {    
        $rotaLeft.css({ transform: 'rotate(' + degreeLeft + 'deg)'});
        // timeout increase degrees:
        timerLeft = setTimeout(function() {
            ++degreeLeft;
            rotateLeft(); // loop
        },25);
    }
    function rotateRight() {    
        $rotaRight.css({ transform: 'rotate(' + degreeRight + 'deg)'});
        // timeout increase degrees:
        timerRight = setTimeout(function() {
            --degreeRight;
            rotateRight(); // loop
        },25);
    }

    rotateRight();
    rotateLeft();    // run

});

但两张图片都没有旋转。但是当我尝试使用以下javascript一次旋转一个时：

$(function() {

    var $rotaLeft = $(' .leftwheel'),
        degreeLeft = 0,
        timerLeft;

    function rotateLeft() {    
        $rotaLeft.css({ transform: 'rotate(' + degreeLeft + 'deg)'});
        // timeout increase degrees:
        timerLeft = setTimeout(function() {
            ++degreeLeft;
            rotateLeft(); // loop it
        },25);
    }
    rotateLeft();    // run it!

});

它正在发挥作用。试图旋转两者时我做错了什么？

Answer 1

您已经以错误的方式声明了以下变量

var $rotaLeft = $(' .leftwheel'),
var $rotaRight = $(' .rightwheel'),

应该是

var $rotaLeft = $(' .leftwheel'); // put semicolon instead of comma
var $rotaRight = $(' .rightwheel'),

或

var $rotaLeft = $(' .leftwheel'),
    $rotaRight = $(' .rightwheel'), // remove var keyword

让所有代码都正常工作：）

<强> Demo

Answer 2

您可以使用@keyframes animation达到效果。这是 working example 。

这是一个CSS代码。

img{float:left;}
.leftwheel {
    -webkit-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
  -moz-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

.rightwheel {
    -webkit-animation: rotation1 2s infinite linear;
    animation: rotation1 2s infinite linear;
  -moz-animation: rotation1 2s infinite linear;
}

@-webkit-keyframes rotation1 {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(-359deg);}
}
@-moz-keyframes rotation1 {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(-359deg);}
}
@keyframes rotation1 {
    from {transform: rotate(0deg);}
    to   {transform: rotate(-359deg);}
}

Answer 3

逗号分隔值应归入一个var声明。像这样声明你的变量。

    var $rotaLeft = $(' .leftwheel'),
    degreeLeft = 0,
    timerLeft;

    var $rotaRight = $(' .rightwheel'),
    degreeRight = 0,       
    timerRight;

DEMO

在相反的方向上旋转两个图像

3 个答案: