个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我想设计一个软按钮，用于通过网页控制 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/
24
4
0
我已经很长时间没有使用数学了，这应该是一个简单的问题。 假设我有两个点 A:(1, 0) 和 B:(1, -1)。 我想使用一个程序(Python 或任何编程语言)来计算 A、原点 (0, 0) 和
我有一个用点表示的凸多边形。点由x 坐标数组 和y 坐标数组 表示。 例如: X = {6, 1, 5, 0, 3} Y = {4, 0, 0, 4, 6} 如何按顺时针排序这些点？点数并不总是相同，
我正在开发一个项目，使用这段代码将一个元素拖到另一个圆形元素周围:http://jsfiddle.net/sandeeprajoria/x5APH/11/ function rotateAnn
我有一个二维矩阵 M[N][N]，我需要将其逆时针旋转 90 度。我已经看到很多顺时针旋转的答案，但我找不到逆时针旋转的答案。这两个操作有多相似？ 最佳答案 如果您反转每一行的顺序，然后顺时针旋转以相
对于我不会涉及的上下文，我需要两个本质上互为倒数的函数。 angle_to() 应该返回钟针从 0° 到连接 p1 和 p2 的线所必须转动的度数>(即 p1 是旋转中心)，其中 p1 和 p2 都是
我是一名优秀的程序员,十分优秀！