###前提・実現したいこと
Monacaでアプリ中です。
ボタンクリックにより、画面に表示しているイメージの拡大(もしくは縮小)を
行いたいです。
onclickでボタンイベントの作製はできたのですが、
どのようにソースコードを書けば、画像が拡大するか
わかりません。
教えて頂きたいです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
次を試してください
<script> window.addEventListener("load", function(){ var d = document.getElementById("click"); d.addEventListener("click", function(){ var elem = document.getElementById("StretchImg"); elem.style.width = "100%"; elem.style.height = "auto"; } , false); } , false); </script> </head> <div id="click"> <img src="bigImage" id="StrtchImg"> </div>
単純に、スクリプトでスタイルをいじります。
投稿2017/07/08 00:19
編集2017/07/08 00:24総合スコア130
0
1.拡大時に表示したいサイズの画像を<img src="bigimg.jpg" id="StretchImg">とかで表示する
2.その画像サイズをCSSで、最初は縮小表示させる#StretchImg { width: 300px; height:auto }
3.onClickでその画像のCSSを変更し、100%表示させる$("#StretchImg").click・・・
既に100%表示されていた場合は縮小表示にする
とかでどうでしょう。
HTML
1<html> 2<head> 3<style type="text/css"> 4img#StretchImg { 5 width:300px; 6 height:auto; 7} 8</style> 9<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 10<script> 11$(document).ready(function() { 12 $("#StretchImg").click(function() { 13 if($(this).css('width') == '300px') { 14 $(this).css("width", "100%"); 15 } else { 16 $(this).css("width", "300px"); 17 } 18 }); 19}); 20</script> 21<body> 22<img src="bigimg.jpg" id="StretchImg"> 23</body> 24</html>
投稿2017/06/30 07:41
編集2017/06/30 07:43総合スコア5405
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/13 07:53