Question

我想通过网页设计一个软按钮来控制伺服的速度。为此我想要设计一个旋钮，通过鼠标点击和控制速度旋转。

程序

<!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>

这段代码有什么问题？它创造了一个像结构一样的旋钮，但没有旋转。

Answer 1

怎么样？

＆＃13;

var servoPosition = 1;
$('#servo').click(function(){
  $('#servo').removeClass('position' + servoPosition);
  if(servoPosition == 4){
    servoPosition = 1;
  }
  else {
    servoPosition++;
  }
  $('#servo').addClass('position' + servoPosition);
})

＆＃13;

.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);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotate" id="servo"></div>

＆＃13;

var servoPosition = 1;
servo = document.getElementById('servo');
servo.onclick = function(){
  if(servoPosition == 4){
    servoPosition = 1;
  }
  else {
    servoPosition++;
  }
  servo.className = 'rotate position' + servoPosition;
}

＆＃13;

.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);
}

＆＃13;

<div class="rotate" id="servo"></div>

＆＃13;

Answer 2

由于您只有四个位置，最简单的解决方案是创建四个CSS类，每个位置一个。所以，像：

.rotate1 { /* 90 deg styles */ }
.rotate2 { /* 180 deg styles */ }
.rotate3 { ... }
.rotate4 { ... }

用一节课开始你的旋钮。在你的onclick函数中，检查它当前有哪个旋转类，然后将其删除，然后添加下一个旋转类。

如何在css中设计图像的多时间顺时针旋转

2 个答案: