如下,这是我的js中的两个函数
function my$(id) {
return document.getElementById(id);
}
function xiala() {
var xiala = my$("xiala");
xiala.style.transform = "rotateX(180deg)";//使被选中的元素旋转180deg
}
下面是html主体
<img id="xiala" type="button" onclick="xiala()" src="imgs/icons/xiala1.png" />
按理说,点击这张图片,它应该会来回旋转,但是这张图片的点击事件只触发了一次,之后再点击都没有反应,请问这是怎么回事?
下面是我用的图片
没有失效……只是你点击触发的动作是xiala.style.transform = "rotateX(180deg)";而不是每次点击后旋转角度都增加180,所以你这个代码第一次点击后变成xiala.style.transform = "rotateX(180deg)";后面点击也没有改变呀。不信你在点击触发的函数里面加个alert('我被点击了!');
<script>
function my$(id) {
return document.getElementById(id);
}
var xialaR=0;
function xiala() {
var xiala = my$("xiala");
xialaR = (xialaR+180)%360;
//alert("我被点击了!");
xiala.style.transform = "rotateX("+xialaR+"deg)";//使被选中的元素旋转180deg
}
</script>
<img id="xiala" type="button" onclick="xiala()" src="tempsnip.png" />