こちらのサイトの様に、リストや特定の場所をクリックした際に、画像を回転させながら、拡大し、表示内容を切り替えるエフェクトをつけたいです。
現在は画像は複数枚用意し、クリック後に切り替えたいと思っています。
【HTML】 <div class="stadium"> <div class="stadium__bg" zoom="off" id="gazo"> <%= image_tag("DeNA_all.png", id:"gazo" ,class:"s__bg" )%> </div> </div> 【CSS】 .stadium{ overflow: hidden; .stadium__bg{ width: 100%; opacity: 0.75; .s__bg{ width: 100%; } } } 【JS】 $(function(){ //クリックの座標の取得とクリックイベントの設定 //zoom=offをhtmlに記載しておき、条件分岐 var click_x , click_y; $(".stadium__bg").click(function(e){ if($(this).attr("zoom")=="off"){ $(this).attr("zoom","on"); click_x = e.offsetX; click_y = e.offsetY; Zoom(3.0, click_x, click_y); }else{ $(this).attr("zoom","off"); Zoom(1, click_x, click_y); } }); //クリック後のエフェクト設定 //拡大縮小させる中心座標の指定 function Zoom(zoom, x, y){ $(".stadium__bg").css({ "-webkit-transform-origin": x+"px "+y+"px", "transform-origin": x+"px "+y+"px", }); setTimeout(function(){ $(".stadium__bg").css({ "-moz-transition": "all 0.5s ease 0", "-webkit-transition": "all 0.5s ease 0", "-webkit-transform" : "scale("+zoom+")", "transform" : "scale("+zoom+")", }); },0.1); } });
回転させながら、ズームし、画像を切替える方法を教えて頂きたいです。
どのようにコードを書いていけばいいのかご教授頂けると幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/24 05:55
2018/03/24 06:48
2018/03/24 06:51
2018/03/24 07:00
2018/03/24 07:54
2018/03/24 08:05
2018/03/24 14:01