jQuery Rotate CSS meter

jQuery Rotate CSS meter

本文关键字：meter CSS Rotate jQuery      更新时间：2023-09-26

我发现一些像VU计一样移动指针的CSS。这模仿了我想做的事情。但是，它从头到尾都会执行完整的动画。而我想通过一系列点击来进行更改。我试图弄清楚如何做到这一点，但我没有成功。我想知道如何仅通过点击使针以相同的方式移动

.CSS

.gauge {
  position:relative;
  width:120px;
  height:120px;
  margin:10px;
  display:inline-block;
}
.needle-assembly {
position:absolute;
  top: 0%;
  left:46%;
  height:100%;
  width:10%;
  -webkit-transform: rotate(-45deg);
}
.needle-holder {
  position:relative;
  top:0;
  left:0;
  height:60%;
  width:100%;
}
.needle {
  position:absolute;
  background-color:#A00;
  height:100%;
  width:20%;
  left:40%;
}
@-webkit-keyframes moveNeedle
{
0% {-webkit-transform: rotate(-45deg);}
60% {-webkit-transform: rotate(55deg);}
65% {-webkit-transform: rotate(50deg);}
100% {-webkit-transform: rotate(65deg);}
}
#gauge {
  -webkit-transform-origin:50% 50%;
  -webkit-animation: moveNeedle 5s;
  -webkit-animation-fill-mode: forwards;
}

.HTML

<div class="gauge" style="height:140px; width:140px;">
  <div class="needle-assembly" id="gauge">
    <div class="needle-holder">    
      <div class="needle"></div> 
    </div>
  </div>
</div>

jQuery

$('#gauge').click(function(){
    $('#gauge').css({transform: 'rotate(45deg)'})                        
});

小提琴

单击它时它不会移动，因为您将其设置为静态值。

您需要以某种方式更改值。

var deg=45;
$('#gauge').click(function(){
    var t = 'rotate(' + deg +'deg)';
    $('#gauge').css({transform: t})     
    deg = deg+5;
});

http://jsfiddle.net/4xc3wnux/6/

相关文章：