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 获取滚动条位置等信息的函数
Sep 08 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
布同 统计英文单词的个数的python代码
2011/03/13 Python
Python常用列表数据结构小结
2014/08/06 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
最新的互联网创业计划书
2014/01/10 职场文书
出纳会计岗位职责
2014/03/12 职场文书
手机银行营销方案
2014/03/14 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
个人工作保证书
2015/02/28 职场文书
追讨欠款律师函
2015/05/27 职场文书