JS簡單的圖片放大縮小的兩種方法

2019-11-20 21:44:11

字體：大中小

來源：轉載

供稿：網友

以左上角為定點，放大縮小，該點位置不變。

方法一：

Html代碼

   <script type="text/javascript"> 
        //兼容IE和火狐   縮小放大、縮放 
        function ImageSuofang(args) { 
            var oImg = document.getElementById("oImg"); 
            if (args) { 
                oImgoImg.width = oImg.width * 1.1; 
                oImgoImg.height = oImg.height * 1.1; 
            } 
            else { 
                oImgoImg.width = oImg.width / 1.1; 
                oImgoImg.height = oImg.height / 1.1; 
            } 
        }     
     </script> 

<form id="form1"> 

     <div class="pancontainer" data-orient="center" style="width:320px; height:480px;margin: 5px 300px 0px 400px;border: 1px solid #000;"> 
<img id="oImg" src="/img/c.jpg" alt="pic"/> 
</div> 

             <input id="btn1" type="button" value="放大" onclick="ImageSuofang(true)" /> 
        <input id="btn2" type="button" value="縮小" onclick="ImageSuofang(false)" /> 
         <!--            <input type="button" value="<-Rotate逆時針" name="RotateL" id="RotateL" onclick="rotateRight('oImg',90);">  --> 

             
</form> 

方法二：

CSS編碼如下：

Css代碼

復制代碼代碼如下:

#biankuang{height:480px;width:320px;margin: 30px auto;}//加一個border可以看到定點為左上角。 

下面是實現圖片縮小放大功能的JS代碼：

Js代碼

復制代碼代碼如下:

var zoomLevel = 0; 
var currentWidth = 0; 
var currentHeight = 0; 
var originalWidth = 0; 
var originalHeight = 0; 
function initial(){ 
    currentWidth = document.myImage.width; 
    currentHeight = document.myImage.height; 
    originalWidth = currentWidth; 
    originalHeight = currentHeight; 
    update(); 
} 
function zoomIn(){ 
    document.myImage.width = currentWidth*1.2; 
    document.myImage.height = currentHeight*1.2; 
    zoomLevel = zoomLevel + 1; 
    update(); 
} 
function zoomOut(){ 
    document.myImage.width = currentWidth/1.2; 
    document.myImage.height = currentHeight/1.2; 
    zoomLevel = zoomLevel - 1; 
    update(); 
} 
function resetImage(){ 
    document.myImage.width = originalWidth; 
    document.myImage.height = originalHeight; 
    zoomLevel = 0; 
    update(); 
} 
function update(){ 
    currentWidth = document.myImage.width; 
    currentHeight = document.myImage.height; 
    zoomsize.innerText = zoomLevel; 
    imgsize.innerText = currentWidth + "X" + currentHeight; 
} 

html的body中的代碼如下：

Html代碼

復制代碼代碼如下:

<body onload="initial()"> 

<div id="biankuang" data-orient="center"> 
<img name="myImage" src="/img/c.jpg" alt="pic"/>     //引入本地圖片 
</div> 

<p> 
<input type="button" value="放大圖片" onclick="zoomIn()"> 
<input type="button" value="縮小圖片" onclick="zoomOut()"> 
<input type="button" value="重置圖片" onclick="resetImage()"> 
<span id="zoomsize"></span> <span id="imgsize"></span></p> 
</body> 