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获取数据的实现方法(兼容手机)
May 24 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
VUE中使用MUI方法
Feb 12 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
Angular 项目实现国际化的方法
2018/01/08 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
vue的for循环使用方法
2019/02/12 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Anaconda入门使用总结
2018/04/05 Python
flask session组件的使用示例
2018/12/25 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
房地产销售员的自我评价分享
2013/12/04 职场文书
承诺书样本
2014/08/30 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
公司处罚决定书
2015/06/24 职场文书
母亲节主题班会
2015/08/14 职场文书
Python绘制分类图的方法
2021/04/20 Python
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
只用Python就可以制作的简单词云
2021/06/07 Python