第二次点击时旋转DIV缓慢旋转

我想我忽略了一些东西。这是一个非常简单的旋转瓶游戏。第二次点击时旋转DIV缓慢旋转

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

这工作完全在瓶子上的第一次点击。但从第二次点击开始，旋转非常慢？

来源

2012-12-25 Martin Lyder

试试这个：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-25 10:18:15 Anujith

+1的工作演示。 @MartinLyder：我会关注任何解决方案的事情是继续增加/减少度数，事后我会认为你达到了内存不足的例外。我不知道如果最大度数是一个最大的整数/长或小数等... – Nope

哦，我发现一个错误，“deg”在每次尝试后都在上升。因此，演示中的徽标速度正在增加每次点击后... –

@MartinLyder：查看更新后的[小提琴]（http://jsfiddle.net/sMcAN/2/），每次点击旋转方向改变... – Anujith

math.round(math.random() * 1000);

试一下

来源

2012-12-25 10:05:52 Monstrum

这是因为，第一，您是从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-25 10:18:03 dakdad

+1解释为什么旋转的行为方式是这样。我认为OP期望这个度数是累积的，而不是。为了继续旋转瓶子，如果第一次旋转之后的最终度数可以设置为div的新的0度位置并且因此具有相同度数设置的新旋转将保持工作并向前旋转，那么将会是甜蜜的。 – Nope

是弗朗索瓦瓦尔的好点。这将是一个伟大的功能:)并感谢Dakdad这是一个很好的方式，使瓶子更随机像... –

我想我会最终制定一个解决方案，用户将有可能通过滑块设置偏移量（速度，力量或类似的东西） –

第二次点击时旋转DIV缓慢旋转

回答

相关问题