如何旋轉圖像，並像JavaScript，html，css中的真實或敢玩遊戲一樣隨機停止它？

-5

我必須旋轉一個圖像，並在特定提到的地方隨機停止旋轉，如真相或敢於遊戲如何旋轉圖像，並像JavaScript，html，css中的真實或敢玩遊戲一樣隨機停止它？

2017-06-15 user8167002

你嘗試過這麼遠嗎？堆棧溢出不是一個代碼寫入服務，但我們試圖幫助您解決代碼中的特定問題。 –

歡迎來到Stack Overflow！預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

首先查看css動畫並使用javascript添加/刪除類。 –

這裏有一個關於如何做到這一點的示例代碼。你可以輸入任意數量的名字到數組中。

var spins = 0; 
 
var people = ["Sarah", "George", "John", "Joe", "Angela", "Kevin"]; 
 
function spin() { 
 
    spins++; 
 
    var winner = Math.floor(Math.random() * people.length); 
 
    var rotation = (spins * 720) + (winner * (360/people.length)); 
 
    $('img').css('transform', 'rotate('+rotation+'deg)'); 
 
    setTimeout(function() { 
 
    $('output').html(people[winner]); 
 
    }, 3000); 
 
}

img { 
 
    transition: transform 3s ease-out; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="https://www.unitedbottles.com/wp-content/uploads/2016/06/United-bottles-Packaging-bouteille-vertes-wn110.png" width="100" height="auto"/> 
 
<button type="button" onclick="spin()">Spin!</button> 
 
<output></output>

來源

2017-06-30 19:07:19 talaub

如何旋轉圖像，並像JavaScript，html，css中的真實或敢玩遊戲一樣隨機停止它？

回答

相關問題