4

我想我忽略了一些东西。这是一个非常简单的旋转瓶游戏。

Javascript/jQuery

$('.bottle').on('click', function(e) {
    this.removeAttribute('style');
    var deg = 3000 + Math.round(Math.random() * 500);
    var css = '-webkit-transform: rotate(' + deg + 'deg);';

    this.setAttribute(
        'style', css
    );
});

CSS：

.bottle {
    width: 200px;
    height: 200px;
    background-image: url(img/bottle.png);
    -webkit-transition: -webkit-transform 6s ease-out;
}

HTML：

<div class="bottle"></div>

这在瓶子的第一次点击时完美运行。但是从第二次点击开始，旋转非常非常慢？

4

3 回答 3

7

试试这个：http: //jsfiddle.net/sMcAN/

var i = 1;
$('.bottle').on('click', function(e) {
this.removeAttribute('style');
var deg = 3000 + Math.round(Math.random() * 500);
deg = ((-1) ^ i) * deg;

var css = '-webkit-transform: rotate(' + deg + 'deg);';
this.setAttribute('style', css);
i++;
});​

另一个更新：http: //jsfiddle.net/sMcAN/2/

于 2012-12-25T10:18:15.973 回答
3

这是因为起初，您从 0 变为超过 3000 的值。但是，该值始终在 3000 以内 - 所以差异不够大，仍然需要您定义的 6 秒。

一种解决方案是确保您抵消该值并使其每次相差几千。

var i = 0, offset = [2000, 4000, 6000, 3000, 5000, 1000];

$('.bottle').on('click', function(e) {
  this.removeAttribute('style');

  var deg = offset[i] + Math.round(Math.random() * 500);
  i++;
  if (i > 5) {
    i = 0;
  }

  var css = '-webkit-transform: rotate(' + deg + 'deg);';

  this.setAttribute(
    'style', css
 );
});​
于 2012-12-25T10:18:03.457 回答
0 
math.round(math.random() * 1000);

试试看

于 2012-12-25T10:05:52.337 回答