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 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
jQuery 选择器详解
Jan 19 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
JS继承最简单的理解方式
Mar 31 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python和ruby,我选谁?
2017/09/13 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
python实现弹窗祝福效果
2019/04/07 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
《我的信念》教学反思
2014/02/15 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
航班延误投诉信
2015/07/02 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
详解Vue3使用axios的配置教程
2022/04/29 Vue.js