脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS简单的图片放大缩小

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>
您可能感兴趣的文章:

相关文章

  • 微信小程序接入微信支付实现过程详解

    微信小程序接入微信支付实现过程详解

    这篇文章主要介绍了微信小程序接入微信支付实现过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • 取得一定长度的内容，处理中文

    取得一定长度的内容，处理中文

    取得一定长度的内容，处理中文...
    2006-12-12
  • 详解Bootstrap按钮

    详解Bootstrap按钮

    本文给大家介绍bootstrap按钮相关知识，包括按钮大小、按钮状态、按钮标签相关样式定义，对bootstrap按钮相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JavaScript实现通过滑块改变网页颜色

    JavaScript实现通过滑块改变网页颜色

    这篇文章主要为大家详细介绍了JavaScript实现通过滑块改变网页颜色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 微信小程序switch组件使用详解

    微信小程序switch组件使用详解

    这篇文章主要为大家详细介绍了微信小程序switch组件的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 关于promise.all()的使用及说明

    关于promise.all()的使用及说明

    这篇文章主要介绍了关于promise.all()的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • 文本框(input)获取焦点(onfocus)时样式改变的示例代码

    文本框(input)获取焦点(onfocus)时样式改变的示例代码

    本篇文章主要是对文本框(input)获取焦点(onfocus)时样式改变的示例代码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • js禁止小键盘输入数字功能代码

    js禁止小键盘输入数字功能代码

    js禁止小键盘输入数字功能代码，需要的朋友可以参考下。
    2011-08-08
  • 如何理解JavaScript模块化

    如何理解JavaScript模块化

    模块化简单来说就是将一个完整的长篇代码文件根据功能进行划分成几个文件，这些文件各自负责一个独立的功能，各个文件组合起来实现一个完整的大功能，这就是模块化，每个负责独立功能的文件就是模块。
    2021-05-05
  • webpack踩坑之路图片的路径与打包

    webpack踩坑之路图片的路径与打包

    这篇文章主要介绍了webpack踩坑之路图片的路径与打包，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论