JavaScriptで画像を動かしたい

Question

JavaScriptで画像を左から右方向に動かすにはどうすればいいのでしょうか？
キャンバスで書いたボールなどは動かすことができるのですが画像がわからなくて・・・。
出来るだけシンプルなコードを教えてください
よろしくお願いします

Answer 1

具体的にどういう動かし方をしたいか分からないので、あくまで動く、というコードです。

var left = 0;
var img = document.getElementById('anyImg');
var img.style.position = 'relative';
(function loop() {
    setTimeout(function () {
        left++;
        img.style.left = left + 'px';

        loop();
    }, 32);
}());

// 移動を`left`でやってますが、`transform`を使う方法もあります。

ちなみに、具体的なやり方よりも「こういうことをやりたい」という要望を書いたほうがより適切な回答をもらえると思います。

Comments

[退会済みユーザー]

ありがとうございます
詳しく書かせていただきます
ランダムにｙ座標をきめて(ｘは０)画像を右に動かして画面の端っこに行くとまたスタート地点にもどるというコードを教えてほしいです

[edom18]

色々考慮せずに、最低限動く感じならこんな感じですね。
ただ、このままでは問題があるのでロジックの仕組みだけを読み取るだけに留めてください。

```
var width = 100;
var left = 0;
var img = document.createElement('div');
document.body.appendChild(img);
img.style.position = 'absolute';
img.style.top = Math.random() * window.innerHeight + 'px';
img.style.width = width + 'px';
img.style.height = '50px';
img.style.backgroundColor = 'red';

(function loop(){
setTimeout(function () {
left += 2;

if (left + width > window.innerWidth) {
left = 0;
}

img.style.left = left + 'px';
loop();
}, 32);
}());
```

Answer 2

どう動かしたいかにもよりますが、こういうならダウンロードして貼るだけで使えます。
http://designscrazed.org/free-responsive-jquery-image-sliders/