UNIRRY

WEBデザインとホロスコープと宇宙のブログ

タブメニュー式オンマウス表現。飛んだり回転したり止まったり。

aooooo

オンマウスにプラスしてタブメニュー化したので記載します。つくるのは、①マウスオンしたら果物がとびあがる、はずしたら落ちる ②クリックした果物に属したdivが下部に表示される ③クリックした果物はオンマウス状態のままで静止する、とします。CSS3を利用した回転アニメーションもやりたかったのでいれてみまミた。

でもなんかCSS3で回転させるとちょっとぼやける・・・!e-----^^

タブメニューっぽくしたjs部分

果物のマウスオンはhoverで普通に指定します。
果物をタブメニューとして扱うので、クリックして選択中のものかどうか判別させるために、クリックしたらlistにselectedクラスを付与します。
また、クリックした時にそれ以外のもののselectedを消したりしたいので「.not()」を使って、選択したもの以外の動作を指定します。

// 表示させるdivのid名を定義、そのdivを最初に表示させとく
var idname = "#i0dtl";
$(idname).css("display", "block");

// タブ部分にマウスオンした時の動作
$("#icolist li").hover(function(){
  $(this).children("img").animate({"top": "-20px"}, 200, "easeOutQuart");
  $(this).children("span").animate({"opacity": "0.3"}, 200, "easeOutQuart");
},function(){
  // クリックでlistがselectedされているかいないかで動作を分岐
  if ( $(this).is(".selected") ) {
    $(this).children("img").css("top", "-20px");
    $(this).children("span").css("opacity", "0.3");
  } else {
    $(this).children("img").animate({"top": "0px"}, 400, "easeOutBounce");
    $(this).children("span").animate({"opacity": "1"}, 200, "easeOutQuart");
  }
});

// タブ部分をクリックした時の挙動
$("#icolist li").click(function(){
  // selectedとかを全部消す
  $("#icolist li").removeClass("selected");
  $("#imgarea div").hide().css("opacity","0");

  // 選択したものにselectedを追加していろいろ処理
  $(this).addClass("selected");
  $("#icolist li").not(".selected").children("img").animate({"top": "0px"}, 400, "easeOutBounce");
  $("#icolist li").not(".selected").children("span").animate({"opacity": "1"}, 200, "easeOutQuart");
  $(this).children("img").css("top", "-20px");

  // 下の表示を切り替える
  idname = "#" + $(this).attr("id") + "dtl";
  $(idname).css("display", "block").animate({"opacity": "1"}, 500, "easeOutQuart");
});

タブメニュー用のhtml部分

<div id="icolist">
<ul>
<li id="i1"><span></span><img src="ico1.png"></li>
<li id="i2"><span></span><img src="ico2.png"></li>
<li id="i3"><span></span><img src="ico3.png"></li>
<li id="i4"><span></span><img src="ico4.png"></li>
<li id="i5"><span></span><img src="ico5.png"></li>
</ul>
</div>

<div id="imgarea">
<div id="i0dtl"><img src="dtl0.png"></div>
<div id="i1dtl"><img src="dtl1.png"></div>
<div id="i2dtl"><img src="dtl2.png"></div>
<div id="i3dtl"><img src="dtl3.png"></div>
<div id="i4dtl"><img src="dtl4.png"></div>
<div id="i5dtl"><img src="dtl5.png"></div>
</div>

果物の回転はCSS3で指定

IE10、ff、Chromeでは回転がきいてるもようです。タグリファレンスを参考にしました。

#icolist {
width: 655px;
height: 150px;
padding-top: 5px;
background: #f5f7ec url(bg1.jpg) no-repeat left 5px;
}
#icolist ul {
padding: 10px 0 0 10px;
}
#icolist li {
position: relative;
float: left;
list-style: none;
cursor: pointer;
}
#icolist li img {
position: relative;
top: 0;
-moz-transition: -moz-transform 0.25s linear;
-webkit-transition: -webkit-transform 0.25s linear;
-o-transition: -o-transform 0.25s linear;
-ms-transition: -ms-transform 0.25s linear; 
}
/* ↓ここで回転↓ */
#icolist li img:hover {
-moz-transform: rotateZ(25deg);
-webkit-transform: rotateZ(25deg);
-o-transform: rotateZ(25deg);
-ms-transform: rotateZ(25deg);
}
#icolist li span {
position: absolute;
top: 77px;
width: 116px;
height: 30px;
background: url(bg.jpg) no-repeat left bottom;
}
#imgarea {
width: 655px;
height:270px;
background: #c8eaea;
text-align: center;
padding-top: 130px;
}
#i0dtl,#i1dtl,#i2dtl,#i3dtl,#i4dtl,#i5dtl {
display: none;
}

タブメニュー式オンマウスのサンプルはこちら

サンプル

tabmenu2


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3