0

change_photoボタンをクリックするたびにdivを移動したいのですが、このコードは1回だけ実行されます。無限ループは必要ありません。クリックするたびに、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>
4

2 に答える 2

1

css3 トランジションを使用します。

#image{
-webkit-transition:all 2s;
}
#image:hover{
left:100px;
} 

Javascript とキーフレーム ルールを削除すると、これが機能し
ます。編集:
jquery.animate ()を使用した jsfiddle

于 2013-01-18T14:43:20.687 に答える
0
@-webkit-keyframes myfirst
{
    0%   {left:0}
   50%   {left:100%}
  100%   {left:0}
}
于 2013-01-18T15:08:24.587 に答える