0
嗨,我有这个代码运行良好,但我仍然需要通过单选按钮来控制动画的速度。所以,我需要一个变量来代替0.5s的如何使用按钮更改过渡时间?
-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
哦..非常感谢你:) –