Question

我想做旋转轮，但我想旋转指针而不是旋转轮。我有以下旋转指针的jQuery代码段，但我不知道如何将该jQuery代码段转换为JavaScript。

jQuery代码：

$( document ).ready(function() {
  var startJP = (164) + (360 * 3);
  $('.jackpot-pointer').animate({  transform: startJP }, {
      step: function(now,fx) {
        $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      },
      duration:6000
  },'linear');
});

我想做这样的事情 https://i.stack.imgur.com/0KArr.gif

Answer 1

这是一个简单的示例，展示了如何使用CSS动画（可以通过JS启用和禁用）来使用香草JS和CSS解决它。

var stage = document.querySelector('#stage');
var rot = document.querySelector('#rotating');

stage.addEventListener('click', function () {
 rot.classList.toggle('animated');
});

#stage {
  position: relative;
  height: 100px;
  background-color: #000;
}

#rotating {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  background-color: #c00;
  animation: rotate linear 6s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  transform-origin: 50% 50%;
}

#rotating.animated {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform:  rotate(0deg) ;
  }
  100% {
    transform:  rotate(359deg) ;
  }
}

<div id="stage">
  <div id="rotating"></div>
</div>

根据您想要/必须支持的浏览器，您可能必须在CSS代码中添加供应商前缀。

以下jQuery代码的JavaScript等效项是什么？

1 个答案: