Question

单击右侧按钮时，我一直试图将图像旋转90度，并在单击左侧按钮时将其旋转-90度。我的代码在这里。我尝试创建某种循环，其中计数器设置为0并循环遍历 if 和 else 语句。但是我没有让它发挥作用：

HTML：

<button id="left" class="button">left</button>
<img src="images/cartoon.jpg" alt="Cartoon" style="width:304px;height:228px;" id="rotate">
<button id="right" class="button">right</button>

CSS：

#draaien {

}

jQuery：

$(document).ready(function(){

 var counter = 0;
 $("#left").click(function(){
 if (counter == 0){
 $("#rotate").css({
    "-webkit-transform": "rotate(-90deg)",
    "-moz-transform": "rotate(-90deg)",
    "transform": "rotate(-90deg)"  
    teller +=1;
 });
 counter=0;

 $("#rotate").css({
 }

}else if($("#right").click()){
$("#rotate").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "transform": "rotate(90deg)"

}
});
});
});

基本上我试图创建某种计数器，点击＆＃34; left＆＃34;，它增加1并添加各种CSS元素，使它可以向左旋转，并递减-1，所以它可以旋转到右边（+90），它似乎没有任何影响。谢谢！

Answer 1

如果我理解，你想设置一个变量来跟踪度数转向，如果是正确则加上90，如果离开则加减90。

$(document).ready(function() {
  var deg = 0;

  $(".button").on("click", function() {
    if ($(this).is("#left")) {
      deg = deg - 90;
    } else {
      deg = deg + 90;
    }
    $("#rotate").css({
      "-webkit-transform": "rotate(" + deg + "deg)",
      "-moz-transform": "rotate(" + deg + "deg)",
      transform: "rotate(" + deg + "deg)"
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left" class="button">left</button>
<img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg" alt="Cartoon" style="width:304px;height:228px;" id="rotate">
<button id="right" class="button">right</button>

Answer 2

试试这个，重点是360度旋转，所以你需要知道当前旋转了多少以及它应该走多远，

＆＃13;

 $(document).ready(function(){
     $("#left").click(function(){
      rotate("#rotate",-90)
     });
     
      $("#right").click(function(){
      rotate("#rotate",90);
     });

});

function rotate(whom,angle)
{
    var rv=$(whom).prop("data-rot")?$(whom).prop("data-rot"):0;
    rv=rv+1;
    n=rv*angle;
    if(Math.abs(n)>=360){n=0;rv=0;}
  
    $(whom).css({
        "-webkit-transform": "rotate(" + n + "deg)",
        "-moz-transform": "rotate(" + n + "deg)",
        "transform": "rotate(" + n + "deg)"  
     });
     
     $(whom).prop("data-rot",rv);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left" class="button">left</button>
<img src="https://cdn.livechatinc.com/s3/default/eyeCatchers/049.png" alt="Cartoon" style="width:304px;height:228px;" id="rotate">
<button id="right" class="button">right</button>

＆＃13;

Answer 3

您的想法是正确的，向左旋转时设置计数器减少，反之亦然，但在您给出的示例中存在一些语法错误。 $("#rotate").css({ "-webkit-transform": "rotate(-90deg)", "-moz-transform": "rotate(-90deg)", "transform": "rotate(-90deg)" teller +=1; });

taller += 1;是一个声明，它不应出现在对象内部。对象是键，值对，由冒号分隔，以逗号连接。

}else if($("#right").click()){

$("#right").click()是一个接受事件处理函数参数的方法，用于绑定元素上的click事件处理程序，它返回jQuery对象。

$("#rotate").css({ } 这不会清除元素上的css。

我在这里写了一个简单的例子：https://jsfiddle.net/yzjk4v37/

有2个按钮控制块向左或向右旋转

使用带有2个按钮的jQuery旋转图像

3 个答案: