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

前端技术 2023/09/08 JavaScript
以左上角为定点，放大缩小，该点位置不变。

方法一：

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>

本文地址：https://www.stayed.cn/item/22599

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案