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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 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 301转向实现代码
2008/09/18 PHP
浅谈php提交form表单
2015/07/01 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
Python中super的用法实例
2015/05/28 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python如何将多个PDF进行合并
2019/08/13 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
尼克松手表官网:Nixon手表
2019/03/17 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
个性车贴标语
2014/06/24 职场文书
新郎答谢词
2015/01/04 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
2015年老干部工作总结
2015/04/23 职场文书
公司禁烟通知
2015/04/23 职场文书
2016党校学习心得体会
2016/01/07 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
Window server中安装Redis的超详细教程
2021/11/17 Redis
Python数据处理的三个实用技巧分享
2022/04/01 Python