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 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
JS中如何优雅的使用async await详解
Oct 05 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
FCKeditor的安装(PHP)
2007/01/13 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP7.0版本备注
2015/07/23 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
一端时间轮换的广告
2006/06/26 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
小程序点击图片实现png转jpg
2019/10/22 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
pygame实现成语填空游戏
2019/10/29 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python itertools.product方法代码实例
2020/03/27 Python
如何基于线程池提升request模块效率
2020/04/18 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
医学生实习自荐信
2013/10/01 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
责任书格式
2019/04/18 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android