マウスオーバー:イメージのズームイン+マウスクリック:イメージのズームアウト
- マウスオーバー、クリック時のイメージのズームアウト、インの効果を作成したいです
実現:css+jQueryで作成します
- イメージのズームイン/アウトのcss(animationの使用)定義
.bounceout{ -webkit-animation: bounceout 0.3s ease 2 alternate; animation: bounceout 0.3s ease 2 alternate ; } .bouncein { -webkit-animation: bouncein 0.3s ease 2 alternate ; animation: bouncein 0.3s ease 2 alternate ; } @-webkit-keyframes bouncein { from{ transform: scale(1); } to { transform: scale(.95); } } @keyframes bouncein { from{ transform: scale(1); } to { transform: scale(.95); } } @-webkit-keyframes bounceout { from { transform: scale(1); } to { transform: scale(1.05); } } @keyframes bounceout { from { transform: scale(1); } to { transform: scale(1.05); } }
-
jQueryを利用して、マウスオーバーとクリック時に、上記動画クラスをイメージブロックに追加します
$('.views-post-img-td img').click(function() { $(this).addClass("bouncein"); }); $('.views-post-img-td img').hover( function() { $(this).addClass("bounceout"); }, function(){ $(this).removeClass("bounceout") ; } );
実例(サンプル)
- ここで、clickイベントを使用せず、mousedownとmouseupを使用しています
コメントを追加