PSO2公式 RSS
    --------(--)

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。
    2015-08-26(Wed)

    時代は変わるもの!!

    こんにちは、saltです。

    お盆には、実家に帰っていたため、ブログの更新ができませんでした。

    と、いつもの言い訳はおいといて、


    今回は、花火大会行ったときの出来事でも書きますかね。(そんなたいしたことではないですが・・・

    花火の演目を放送とかでよく言うじゃないですか、

    その中で、

    「次は、大人気アニメのメドレーでお送りします!!」

    とかあるわけです。

    さて、一体大人気アニメとは何だったでしょうか?




    A.妖怪ウォッチ でした。

    少し前まで、ポケモンだったのに、もうすっかり妖怪ウォッチになってしまいましたね。

    スーパーとかでは、ポケモンパン売り場も妖怪ウォッチに占領されて、

    ポケモンパン見なくなりました~


    時代は変わっていきますね。

    さて、次は何に変わるんでしょうか~


    といったところで今回はおしまい!!

    また次回~ノシ

    スポンサーサイト
    2015-08-11(Tue)

    javascriptで画像移動

    こんにちは、saltです。 少し遅くなりました。

    今回は、前回の予告どおり、javascriptで 画像を移動できるようにしたいと思います。
    動作環境は、IE9以降、Chrome, firefoxですかね。他は試してないですが、おそらく問題ないと思います。

    では早速・・・
    作ってみたコードがこちらです。

    ↓javascript ソースコード
    //ドラッグして画像を移動する
    var x, y;
    var mouseX, mouseY;
    var flag = false;
    window.document.onmousemove = dragImg;

    // ドラッグし始めるとき
    function dragOn(event) {
      flag = !flag;

      if(flag){
        document.getElementById('pic').style.cursor = 'move';
      }
      else{
        document.getElementById('pic').style.cursor = 'auto';
      }

      mouseXY(event);
      y = parseInt(mouseY) - parseInt(getNum(document.getElementById('pic').style.top));
      x = parseInt(mouseX) - parseInt(getNum(document.getElementById('pic').style.left));
    }

    // マウス座標の更新
    function mouseXY(event){
      //マウスX位置取得
      if(document.all){
        mouseX = document.body.scrollLeft + window.event.clientX;
      }
      else if(document.layers || document.getElementById){
        mouseX = event.pageX;
      }

      //マウスY位置取得
      if(document.all){
        mouseY=document.body.scrollTop+window.event.clientY;
      }
      else if(document.layers || document.getElementById){
        mouseY= event.pageY;
      }
    }

    // 文字列からpx以外の数字を取り出す
    function getNum(str){
      return str.replace("px","");
    }

    // 画像の位置を変える
    function dragImg(event) {
      if(!flag) return;

      mouseXY(event);

      var afterX = mouseX - x;
      var afterY = mouseY - y;

      document.getElementById('pic').style.top = afterY+"px"; // pxがないと正常に移動しないかも
      document.getElementById('pic').style.left = afterX+"px";
    }


    ↓html 側ソースコード (個人的には、styleはスタイルシートで書きたい派ですが・・・
    // 動かしたい画像に id="pic" style="position:absolute;" onmousedown="dragOn(event)" を付けるだけ



    デモ
    桃の画像(PSO2でのチームフラグ画像) をクリックして、マウスを移動させるとついてくるはずなので、
    適当な場所でもう一度クリックしてください。
    ※ブラウザのサイズによっては、画像の位置がずれていることもあります。(対処するの面倒なので、今回は勘弁してください・・・


    momo






    今回、作るにあたって
    ドラッグして画像を移動する。複数画像 Mozilla Firefox対応
    ↑のサイト様を参考にさせていただきました。

    今回は、画像一枚だけですが、拡張すれば複数枚も可能ですね。
    なかなか楽しめました。

    また、プログラム自体は前からできていたのですが、
    デモとして、javascriptを動作させることに苦戦しました。
    fc2ブログでは、どうやら本文中にjavascriptコードを書くと(外部も含め)正常に動作しない模様で・・・

    FC2ブログでJavaScriptが動作しない件について
    ↑のサイト様のおかげで対処できました。

    一時fc2ブログ本気でやめようと思いましたね(笑)

    では今回はこの辺で~ノシ
    2015-08-06(Thu)

    次回あたり書く予定のものとか

    こんにちは、saltです。

    気づくと、更新が遅くなってしまうようで・・・
    なんとか毎週の更新はやりたいとこなんですがね。

    今回は少し時間がないので、次回書こうと思っていることでも書いておきますか。

    次回は、ずばり・・・

    (javascript) html ページ上の画像を移動可能にする!!

    です。

    なぜいまさら、javascript かは置いておいて、jQuery とかのほうがよかったかな・・・?

    決めてしまったことは仕方ないので、それについて書きます(有言実行!!


    では、次回をお楽しみに~ノシ

    プロフィール

    Author:salt
    saltの自由なブログへようこそ!
    週一ぐらい?で更新してます。

    ・好きなこと
       ゲーム
       アニメ鑑賞(ゼロ魔とか

    ・好きなゲーム
       太鼓の達人
       ドラゴンクエスト(Ⅹ以外は好き
       イース
       軌跡シリーズ
       etc...


    PSO2もやってます。プレイヤー名はSALT40(SALT400)です。
    シップは8です。
    よかったらフレ登録してね。

    PSO2関連のコメントあればうれしいです。
    PSN:saltp40

    カテゴリ
    最新記事
    最新コメント
    月別アーカイブ
    検索フォーム
    リンク
    スポンサーサイト
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。