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


Posted in Javascript onNovember 11, 2013

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

方法一:

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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
js全屏显示显示代码的三种方法
Nov 11 #Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 #Javascript
JavaScript splice()方法详解
Sep 22 #Javascript
javascript与cookie 的问题详解
Nov 11 #Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 #Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 #Javascript
AJAX跨域请求json数据的实现方法
Nov 11 #Javascript
You might like
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
Python os模块学习笔记
2015/06/21 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
python logging模块的使用总结
2019/07/09 Python
Python有参函数使用代码实例
2020/01/06 Python
python开发入门——set的使用
2020/09/03 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
时尚休闲吧创业计划书
2014/01/25 职场文书
大学毕业感言50字
2014/02/07 职场文书
学习雷锋倡议书
2014/04/15 职场文书
会计个人实习计划书
2014/08/15 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
2014财务年终工作总结
2014/12/08 职场文书
办公室个人总结
2015/02/28 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书