我想设计一个软按钮，用于通过网页控制 Helm 机的速度。为此，我想设计一个旋钮，它会随着鼠标点击而旋转并控制速度。
程序
<!DOCTYPE html>
<html>
<head>
<script>
var servoPosition = 1;
servo = document.getElementById('servo');
servo.onclick = function(){
if(servoPosition == 4){
servoPosition = 1;
}
else {
servoPosition++;
}
servo.className = 'rotate position' + servoPosition;
}
</script>
<style>
.back{
position: relative;
top: 0;
left: 0;
}
.rotate {
top: 30px;
left:15px;
position: absolute;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
outline: 0;
}
#servo{
border-radius: 50%;
background-color: gold;
width: 200px;
height: 200px;
}
#servo:after{
content: "";
position: absolute;
left:45%;
top: 5%;
width:10%;
height:10%;
background-color: black;
border-radius: 50%;
}
.position1{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
.position2{
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
.position3{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.position4{
-webkit-transform:rotate(270deg);
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="rotate" id="servo"></div>
</body>
</html>
这段代码有什么问题？？它创建了一个类似旋钮的结构，但没有旋转。
最佳答案
这个怎么样？
var servoPosition = 1;
$('#servo').click(function(){
$('#servo').removeClass('position' + servoPosition);
if(servoPosition == 4){
servoPosition = 1;
}
else {
servoPosition++;
}
$('#servo').addClass('position' + servoPosition);
}).back{
position: relative;
top: 0;
left: 0;
}
.rotate {
top: 30px;
left:15px;
position: absolute;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
outline: 0;
}
#servo{
border-radius: 50%;
background-color: gold;
width: 200px;
height: 200px;
}
#servo:after{
content: "";
position: absolute;
left:45%;
top: 5%;
width:10%;
height:10%;
background-color: black;
border-radius: 50%;
}
.position1{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
.position2{
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
.position3{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.position4{
-webkit-transform:rotate(270deg);
transform: rotate(270deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotate" id="servo"></div>var servoPosition = 1;
servo = document.getElementById('servo');
servo.onclick = function(){
if(servoPosition == 4){
servoPosition = 1;
}
else {
servoPosition++;
}
servo.className = 'rotate position' + servoPosition;
}.back{
position: relative;
top: 0;
left: 0;
}
.rotate {
top: 30px;
left:15px;
position: absolute;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
outline: 0;
}
#servo{
border-radius: 50%;
background-color: gold;
width: 200px;
height: 200px;
}
#servo:after{
content: "";
position: absolute;
left:45%;
top: 5%;
width:10%;
height:10%;
background-color: black;
border-radius: 50%;
}
.position1{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
.position2{
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
.position3{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.position4{
-webkit-transform:rotate(270deg);
transform: rotate(270deg);
}<div class="rotate" id="servo"></div>关于javascript - 如何在css中设计图像的多个时间顺时针旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38321375/