画像をボタンを使って拡大・縮小したい

###前提・実現したいこと
Monacaでアプリ中です。

ボタンクリックにより、画面に表示しているイメージの拡大（もしくは縮小）を
行いたいです。

onclickでボタンイベントの作製はできたのですが、
どのようにソースコードを書けば、画像が拡大するか
わかりません。

教えて頂きたいです。

行動規範の内容に同意します

回答2件

次を試してください

<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

grandcross_info

総合スコア130

kenbohan

2017/07/13 07:53

回答の方ありがとうございます。まだ、うまくいってません。以下、コードとなります。 <ons-page> //使用している画像です <img src="jyouken-img/1-2.JPG"　id="youjyou"> <ons-speed-dial position="bottom right" direction="up"> <ons-fab> <ons-icon icon="md-plus" ></ons-icon> </ons-fab> <ons-speed-dial-item > //ここでイベント作成しているつもりです。 <ons-icon icon="expand" 　onclick ="click()"></ons-icon> </ons-speed-dial-item> <ons-speed-dial-item> <ons-icon icon="compress"></ons-icon> </ons-speed-dial-item> </ons-speed-dial> </ons-page> 教えて頂いたコードをそのまま記入致しました。知識が浅くて申し訳ありません。

行動規範の内容に同意します

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

kunai

総合スコア5405

kenbohan

2017/07/13 08:58

丁寧な回答誠に有難うございます。 CSS #StretchImg { width: 100%; height:100% } <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#StretchImg").click(function() { if($(this).css('width') == '300px') { $(this).css("width", "100%"); } else { $(this).css("width", "300px"); } }); }); </script> </head> <ons-page> //使用している画像です <img src="jyouken-img/1-2.JPG"　id="youjyou"> <ons-speed-dial position="bottom right" direction="up"> <ons-fab> <ons-icon icon="md-plus" ></ons-icon> </ons-fab> <ons-speed-dial-item > //ここでイベント作成しているつもりです。 <ons-icon icon="expand" 　onclick ="click()"></ons-icon> </ons-speed-dial-item> <ons-speed-dial-item> <ons-icon icon="compress"></ons-icon> </ons-speed-dial-item> </ons-speed-dial> </ons-page> コードは上記になります。あと少しでいけそうなのですが、、、、、。

行動規範の内容に同意します

あなたの回答