jQueryのdraggableでイロイロと仕掛けを組む

マスコットキャラクターにイースター・エッグを仕込んでおきたい。

静止画キャラにホバーすると吹き出しにランダムなセリフ
ホバーが外れると吹き出しごと消える
ドラッグするとキャラがgifアニメ、ドラッグ用の吹き出しとセリフ
ドラッグが止まると静止画、元の吹き出し、終了セリフ

draggableを使うときは「margin-top:16px;」を指定すること

hoverするたびにガックンガックンというかカックンというかブロックがずれる。どうやらhoverするとmargin-topが発生するらしい。なぜに？理由は分からないけどとりあえずいいや。

同じ要素に複数のアクションを指定する方法

要素hogeに仕掛けを組む

$(function(){
  $("#hoge").draggable({
    grid: [1, 1],
    drag: function(e, ui){
      /*ドラッグしたときアクション*/
    },
    stop: function(e, ui){
      /*ドラッグが終わった時アクション*/
    },
    revert: true
  }).hover(function(){
      /*ホバーしたときアクション*/
  },function(){
      /*ホバーじゃなくなったときアクション*/
  });
});

要素のcssを一括で指定する

パラメータを変数化できる。

var prop = {
  "background-image": "url(hage.png)",
  "margin-left": "-110px"
};
$("#hoge_img").css(prop);

最近は1行で何でもかんでも書くよりもコードの幅を狭くしたい。

ランダムなセリフ

セリフはキャラクターの性格に大きく影響を与える。やなな、ふなっしーから学んだ。

voice = new Array("見つかった！","こんにちは！","ゆるキャラじゃないもん","ホゲだよ");
var rtn = voice[Math.floor(Math.random() * voice.length)];
$("#hoge_voice").html(rtn);

タブレット対応

iPadでも動いてほしいリクエストで目が覚める。
jQuery UI Touch Punchを追加で読み込むだけ。

<script src="http://code.jquery.com/jquery.min.js"></script> /*jQuery本体*/
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> /*jQuery UI本体*/
<script src="jquery.ui.touch-punch.min.js"></script> /*jQuery UI Touch Punch*/

jQueryとjQuery UIの召喚魔法は好きな奴で。

吹き出し

http://fukidesign.com/がカッコイイ
http://fukidesign.com/wp/?p=903
http://fukidesign.com/wp/?p=558
　

スクリプト

<script src="http://code.jquery.com/jquery.min.js"></script> /*jQuery本体*/
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> /*jQuery UI本体*/
<script src="jquery.ui.touch-punch.min.js"></script> /*jQuery UI Touch Punch*/
<script type="text/javascript">
<!--
$(function(){
  $("#hoge").draggable({
    grid: [1, 1],
    drag: function(e, ui){
      /*ドラッグしたときアクション*/
      $("#hoge_img").attr("src", "fling_hoge.gif");"  /*キャラのGIF画像*/
      var drag_prop={
        "background-image": "drag_fukidasi.png",
        "margin-left": "-110px;"
      }
      $("#hoge_fukidasi").css(drag_prop);　/*吹き出し変更*/
      $("#hoge_voice").html("うわぁぁあっ！");　/*悲痛な叫び*/
    },
    stop: function(e, ui){
      /*ドラッグが終わった時アクション*/
      var stop_prop={
        "background-image": "fukidasi.png",
        "margin-left": "-70px;"
      };
      $("#hoge_fukidasi").css(stop_prop);　/*吹き出し変更*/
      $("#hoge_voice").html("たすかった…");　/*安堵の声*/
      $("#hoge_fukidasi").fadeOut("slow");
      $("#hoge_img").attr("src", "hoge.gif");"  /*キャラの静止画像*/
    },
    revert: true
  }).hover(function(){
      /*ホバーしたときアクション*/
      $("#hoge_fukidasi").fadeIn();
      voice = new Array("見つかった！","こんにちは！","ゆるキャラじゃないもん","ホゲだよ");
      var rtn = voice[Math.floor(Math.random() * voice.length)];
      $("#hoge_voice").html(rtn);
  },function(){
      /*ホバーじゃなくなったときアクション*/
      $("#hoge_fukidasi").fadeOut();
  });
});
-->
</script>

HTMLコード

CSSの前にbodyのところだけ

<body>
<div id="hoge">
  <div id="hoge_area">
    <div id="hoge_fukidasi">
      <p id="hoge_voice">hoge's voice</div>
    </div>
  </div>
  <img id="hoge_img" src="hoge.gif">
</div>
</body>

CSSいろいと

マスコット画像は32x32サイズで作成、吹き出しは180x70サイズで作成（というか、縮小した）

<style type="text/css"> 
#hoge{margin-top: 16px; width: 32px;}
#hoge_area{height: 64px; display: block;}
#hoge_fukidasi{
display: none;
text-align: center; vertical-align:middle;
height: 70px; width: 180px;
background: url(fukidesi.png) no-repeat top center;
background-size: cover;
margin-left: -70px;
}
#hoge_fukidasi p{ line-height: 45px;}
</style>

コードはキーボードを叩けば書けるけどgifアニメが苦労する。
　

kenmituoの日記