JS简单的图片放大缩小的两种方法

内容摘要
以左上角为定点，放大缩小，该点位置不变。

方法一：

Html代码复制代码 代码如下: <script type="text/javascript"> //兼容IE和火狐 缩小放大、缩放 funct
文章正文
以左上角为定点，放大缩小，该点位置不变。

方法一：

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>
代码注释
上一篇安装Win8.1系统时提示“Windows安装程序无法将windows配置...”的三种解决方法下一篇php截取中文字符串函数实例

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！