0
こんにちは、このコードはうまくいきますが、ラジオボタンを使ってアニメーションの速度を制御する必要があります。だから私は、変数を使用して0.5秒ボタンで遷移時間を変更するにはどうすればよいですか?
-webkit-transition: all 0.5s ease-in-out;
を交換する必要があるが、私は、変数の値を宣言するためにJavaScriptで、ボタンのいずれかで、それを実装するかどうかはわかりません。 ご提案は大変ありがとうございます。おかげさまで
JAVASCRIPT
document.getElementById('panner01').onclick = function() {
var div = document.getElementById('panpos01'),
deg = 30;
div.style.webkitTransform = 'rotate('+deg+'deg)';
}
document.getElementById('panner02').onclick = function() {
var div = document.getElementById('panpos01'),
deg = 60;
div.style.webkitTransform = 'rotate('+deg+'deg)';
}
document.getElementById('panner03').onclick = function() {
var div = document.getElementById('panpos01'),
deg = 90;
div.style.webkitTransform = 'rotate('+deg+'deg)';
}
CSS
#panpos01 {
position:relative;
height: 200px;
width: 200px;
margin: 30px;
-webkit-transition: all 0.5s ease-in-out;
}
HTML
<div id="panimageloc01"><img id="panpos01" src="https://d30y9cdsu7xlg0.cloudfront.net/png/17392-200.png"></div>
<form action="">
<input type="radio" name="gender" id="panner01" value="1"> 1
<br>
<input type="radio" name="gender" id="panner02" value="2"> 2
<br>
<input type="radio" name="gender" id="panner03" value="3"> 3
</form>
おかげヴァルス、私は感謝しています。今は速度を決める回転ボタンです。私の問題は、ラジオボタンの別のセットからスピードを決めなければならないということです。ボタン1 2 3は位置を設定しますが、ボタンA B Cは速度を設定します。 –
他のボタンのコードを複製し、そこに新しい部分だけを設定してください.... – vals
ああ..ありがとうございます:) –