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

更新时间：2013年11月11日 16:38:29 作者：

这篇文章介绍了JS简单的图片放大缩小的两种方法，有需要的朋友可以参考一下

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

方法一：

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> 

您可能感兴趣的文章:

JavaScript基础教程之如何实现一个简单的promise
看了些promise的介绍，还是感觉不够深入，所以下面这篇文章主要给大家介绍了关于JavaScript基础教程之如何实现一个简单的promise的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
2018-09-09
原生JS实现呼吸轮播图
这篇文章主要为大家详细介绍了原生JS实现呼吸轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
Javascript函数的参数
本文给大家分享的是网易云课堂中金旭亮老师的课堂笔记，对于大家学习javascript非常有帮助，这里推荐给小伙伴们
2015-07-07
一些实用的TAB效果
一些实用的TAB效果...
2006-11-11
JS实现购物车基本功能
这篇文章主要为大家详细介绍了JS实现购物车基本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
window.print()打印html网页的两种方法实现
本文主要介绍了window.print()打印html网页的两种方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
JavaScript的面向对象(二)
JavaScript的面向对象(二)...
2006-11-11
Sourcemap源代码映射详细介绍
这篇文章主要为大家介绍了Sourcemap源代码映射介绍及示例详解解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
2023-04-04
JS实现简单面向对象的颜色选择器实例
这篇文章主要介绍了JS实现简单面向对象的颜色选择器,以完整实例形式分析了JavaScript基于面向对象实现颜色选择器的具体步骤与实现技巧,需要的朋友可以参考下
2016-04-04
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
由于项目上的需要，要用一个iframe高度自适应的功能，在google上搜了很久，找了一些修改了下。大家可以测试下。
2010-03-03