我想在每次点击 change_photo 按钮时移动 div,但这段代码只运行一次,我不需要无限循环,我希望在每次点击时移动 div。
这是 CSS:
<style>
@-webkit-keyframes myfirst
{
0% {left:0px}
100% {left:100%}
}
#images {
width: 1000px;
height: 300px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#im{ position:relative;}
</style>
这是html代码:
<div id="images" style="">
<img id="im" src="images/banner.jpg"
style="width: 833px; height: 179px;" />
</div>
<input type="button" value="change_photo" onclick="animate();" />
</div>
<script>
function animate() {
var im = document.getElementById("im");
im.style.webkitAnimation = "myfirst 3s";
}
</script>
最佳答案
使用css3 transitions-
#image{
-webkit-transition:all 2s;
}
#image:hover{
left:100px;
}
删除 Javascript 和关键帧规则,这将起作用
编辑:
jsfiddle使用 jquery.animate()
关于javascript - 我想在 css3 中每次点击动画图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14401197/