web-dev-qa-db-ja.com

ズームボタンをクリックして画像をズームインおよびズームアウトする（JavaScript）

2つのズームボタン（+）と（-）で画像を拡大/縮小しようとしています。問題は、画像が全画面サイズ（幅100％）になると「ズームイン」が停止することです。画面サイズよりもはるかに大きい画像をズームする必要があります。その方法を理解することができません。私はJavaScriptの初心者なので、誰かがこの小さなJavascriptの問題を手伝ってくれるモチベーションを持っているといいのですが。

ズームボタンで動作する簡単なズームイン/アウト/リセットプラグインはありますか？画像の取得もクールなだけではありません。

再度、感謝します！

function zoomin(){
        var myImg = document.getElementById("map");
        var currWidth = myImg.clientWidth;
        if(currWidth == 2500) return false;
         else{
            myImg.style.width = (currWidth + 100) + "px";
        } 
    }
    function zoomout(){
        var myImg = document.getElementById("map");
        var currWidth = myImg.clientWidth;
        if(currWidth == 100) return false;
                 else{
            myImg.style.width = (currWidth - 100) + "px";
        }
    }
*body {
  margin: 0;
}
#navbar {
        overflow: hidden;
        background-color: #099;
        position: fixed;
        top: 0;
        width: 100%;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 20px;
}
#navbar a {
  float: left;
  display: block;
  color: #666;
  text-align: center;
  padding-right: 20px;
  text-decoration: none;
  font-size: 17px;
}
#navbar a:hover {
  background-color: #ddd;
  color: black;
}
#navbar a.active {
  background-color: #4CAF50;
  color: white;
}
.main {
  padding: 16px;
  margin-top: 30px;
}
.main img {
        max-width: 100%;
        height: auto;
}
.button {
  width: 300px;
  height: 60px;
}
</head>
<body>

<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>

<div class="main">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>

"/>

javascriptcsszoomimage-zoom
6
Dr.Feelgood

前の回答でコードを除いて完全に問題がないと述べたように、画像の最大幅はmax-width: 100%で制限しています。これを削除すると、目的の出力が得られます。

function zoomin() {
  var myImg = document.getElementById("map");
  var currWidth = myImg.clientWidth;
  if (currWidth == 2500) return false;
  else {
    myImg.style.width = (currWidth + 100) + "px";
  }
}

function zoomout() {
  var myImg = document.getElementById("map");
  var currWidth = myImg.clientWidth;
  if (currWidth == 100) return false;
  else {
    myImg.style.width = (currWidth - 100) + "px";
  }
}
*body {
  margin: 0;
}

#navbar {
  overflow: hidden;
  background-color: #099;
  position: fixed;
  top: 0;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 20px;
}

#navbar a {
  float: left;
  display: block;
  color: #666;
  text-align: center;
  padding-right: 20px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.main {
  padding: 16px;
  margin-top: 30px;
  width: 100%;
  height: 100vh;
  overflow: auto;
  cursor: grab;
  cursor: -o-grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.main img {
  height: auto;
  width: 100%;
}

.button {
  width: 300px;
  height: 60px;
}
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>

<body>

  <div id="navbar">
    <button type="button" onclick="zoomin()"> Zoom In</button>
    <button type="button" onclick="zoomout()"> Zoom Out</button>
  </div>

  <div class="main dragscroll">
    <img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
  </div>

編集：

  • 最初の幅をmax-widthではなく100％（フルサイズ）にしたいので、最後の編集で行ったように、幅を100％に設定します。
  • ドラッグ機能を実装して画像をスクロールするために、dragscrollと呼ばれる別のCSSクラスがmainコンテナーに追加され、必要に応じてjsがインポートされます。
6
user7207170

あなたのズーム方法はうまく機能していますcss max widthを削除し、js検証を変更して画像を許可し、大きくします。

function zoomin(){
        var myImg = document.getElementById("map");
        var currWidth = myImg.clientWidth;
        //if(currWidth == 2500) return false;
        // else{
        //    myImg.style.width = (currWidth + 100) + "px";
        //} 
        myImg.style.width = (currWidth + 100) + "px";
    }
    function zoomout(){
        var myImg = document.getElementById("map");
        var currWidth = myImg.clientWidth;
        if(currWidth == 100) return false;
                 else{
            myImg.style.width = (currWidth - 100) + "px";
        }
    }
*body {
  margin: 0;
}
#navbar {
        overflow: hidden;
        background-color: #099;
        position: fixed;
        top: 0;
        width: 100%;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 20px;
}
#navbar a {
  float: left;
  display: block;
  color: #666;
  text-align: center;
  padding-right: 20px;
  text-decoration: none;
  font-size: 17px;
}
#navbar a:hover {
  background-color: #ddd;
  color: black;
}
#navbar a.active {
  background-color: #4CAF50;
  color: white;
}
.main {
  padding: 16px;
  margin-top: 30px;
}
.main img {
        /* max-width: 100%; */
        height: auto;
}
.button {
  width: 300px;
  height: 60px;
}
</head>
<body>

<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>

<div class="main">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>

一方で、ズームライブラリとして magic zoom をお勧めします

1
Renzo Calla

最大幅を削除：100％; .main img cssから

0
user9051387