質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    16991questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

JavaScriptで画像を動かしたい

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 3,035

Furisuke

score 93

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

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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`を使う方法もあります。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/12 10:42

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

    キャンセル

  • 2015/08/12 13:30

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

    ```
    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);
    }());
    ```

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    JSのテキスト保存について

    下記のコードはテキストボックスに書かれた文字をinnerHTMLで書き出しそれを更新しても消えない、保存するというプログラムです。 ですが肝心の保存ができません なぜでしょうか?

  • 受付中

    phantomjsでfacebookのシェアボタンを押す

    phantomjsでfacebookのシェアボタンを押す方法がわかりません とりあえずシェアボタンを押下したあとのスクリーンショットを 撮るところまでやってみたんですが どうもうま

  • 解決済

    javascriptでのグーグルマップ表示

    お世話になります あるCSVファイルから住所、店舗名、グーグルマップの吹き出しに表示するメッセージ、リンク先をjavascriptで読み込み、配列に格納し、表示したいのですがうま

  • 受付中

    Javascriptでtitle属性をもとに要素取得できますか?

    タイトルそのままですが以下のようなDOMに対して取得する方法を教えて下さい。 idは無しです。 <div title="A1">   <p data1="none">内容1</p

  • 受付中

    sublime3でupdate_image関数を変更したい

    以下の設定をsublime3でも行いたいですが、「update_image_sizeの登録部分に update_image_size_for_retina を追記」の箇所が2と3で

  • 解決済

    グーグルマップのスタイルについて

    お世話になります。 現在グーグルマップのスタイルを使っていろいろと試しているのですが、スタイルが反映されなくて困っています。 どこが間違っているのかをご指摘いただければ幸いです

  • 解決済

    ServiceWorkerでのサイト表示時間を調べるには?

    CacheStorageに格納されるhtmlファイルのレタリングの速度を調べたいです。 casperJSを使おうとしていましたが、大元のPhantomJSでサポートされていませんで

  • 受付中

    JavaScriptでタグ同士の+結合で文字列が崩れる

    正規表現でhttp://~等の入力があった場合自動でアンカー表記し、Link表示するようにJavaScriptを組んでおります。     function autoLink(me

同じタグがついた質問を見る

  • JavaScript

    16991questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。