-1

ここでは、ボタンのクリックで簡単なズームインおよびズームアウト機能を作成しようとしました。

HTML

 <input type="button" value ="-" onClick="zoom(0.9)"/>
 <input type="button" value ="+" onClick="zoom(1.1)"/>
 <div id="thediv">

 <img id="pic" src="http://cdn1.iconfinder.com/data/icons/VistaICO_Toolbar-Icons/256/Zoom-in.png"/>
 </div>

脚本

var zoomLevel = 100;
var maxZoomLevel = 105;
var minZoomLevel = 95;

function zoom(zm) {
var img=document.getElementById("pic");
if(zm > 1){
    if(zoomLevel < maxZoomLevel){
        zoomLevel++;
    }else{
        return;
    }
}else if(zm < 1){
    if(zoomLevel > minZoomLevel){
        zoomLevel--;
    }else{
        return;
    }
}
wid = img.width;
ht = img.height;
img.style.width = (wid*zm)+"px";
img.style.height = (ht*zm)+"px";
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}

しかし問題は、ズームイン機能をクリックするたびに、画像がページの上隅に移動することです。これを解決しようとしましたが、効果的な解決策はありませんでした。

これは、間違いを見つけるのに役立つ可能性のある作業中のBINです。

また、別の質問: この関数にマウスホイールを適用する方法はありますか?

アップデート

ズームの問題が変更されました。しかし、マウスホイールもここで実行されましたが、問題は、マウスホイールの最大値を指定できないことです。 更新されたビン

4

3 に答える 3

2 
img.style.marginLeft = -(img.width/2) + "px"; // you have negation sign here
img.style.marginTop = -(img.height/2) + "px"; // you have negation sign here

に変更します：

img.style.marginLeft = (img.width/2) + "px";
img.style.marginTop = (img.height/2) + "px";

JSビンリンク

于 2012-12-27T07:07:30.960 に答える
1

これを参照してください：http://jsbin.com/itekek/14/edit

ここにはズームとマウスホイールが含まれています..

更新:クラス名で要素を取得するには、以下の関数を使用します。

function findElementByClass(matchClass) {
 var elems = document.getElementsByTagName('*'),i;
 for (i in elems) {
    if ((" " + elems[i].className + " ").indexOf(" " + matchClass + " ") > -1) {
        return elems[i];
    }
   }
  return null;
}

サンプルを見る

于 2012-12-27T07:26:32.610 に答える
1

marginLeftあなたと計算から判断するとmarginTop、中心点を維持しながら画像をズームインおよびズームアウトしたいと思います。

だからこれを試してください：

http://jsbin.com/itekek/4

幅と高さの初期値を保持し、ズーム制限値をわずかに変更しました。

編集：

http://jsbin.com/itekek/46

マウス ホイールのサポートが追加されました。

于 2012-12-27T07:21:45.010 に答える