簡單的圖片放大縮小

以左上角為定點,放大縮小,該點位置不變。
 
方法一:
 
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"> 
        
     <p 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"/> 
</p> 
 
             <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()"> 
 
<p id="biankuang" data-orient="center"> 
<img name="myImage" src="/img/c.jpg" alt="pic"/>     //引入本地圖片 
</p> 
 
<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>  

作者“Rebecca”
 

發佈留言