我一直在尝试在单击向右 按钮时将图像旋转 90 度,并在单击向左 按钮时将其旋转 -90 度。我的代码在这里。 我正在尝试创建某种循环,将 counter 设置为 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)"
}
});
});
});
基本上我试图创建某种计数器,在单击“左”时,它会递增 1 并添加各种 CSS 元素以便它可以向左旋转,并递减 -1 以便它可以向右旋转(+90),好像没什么效果。谢谢!
最佳答案
据我了解,您想设置一个变量来跟踪转弯度数,如果向右则加 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>
关于javascript - 使用带有 2 个按钮的 jQuery 旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44678096/