JS实现图片放大缩小的方法


Posted in Javascript onFebruary 15, 2017

本文实例讲述了JS实现图片放大缩小的方法。分享给大家供大家参考,具体如下:

最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来。我有2个种方法实现:第一种方法可以兼容IE和火狐(其他的浏览器我没有测试);第二种方法只能兼容IE。

第一种方法很简单,代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inherits="ImageZoom.Image" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <style type="text/css">
    img
    {
      border:#000000 1px solid;
    }
  </style>
  <script language="JavaScript" type="text/javascript">
    //兼容IE和火狐
    function ImageChange(args) {
      var oImg = document.getElementById("img1");
      if (args) {
        oImg.width = oImg.width * 1.2;
        oImg.height = oImg.height * 1.2;
      }
      else {
        oImg.width = oImg.width / 1.2;
        oImg.height = oImg.height / 1.2;
      }
    }
   </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <img id="img1" alt="图片" src="images/img1.gif" mce_src="images/img1.gif"/>
    <br />
    <input id="btn1" type="button" value="放大" onclick="ImageChange(true)" />
    <input id="btn2" type="button" value="缩小" onclick="ImageChange(false)" />
  </div>
  </form>
</body>
</html>

第二种方法也简单,就是把中间的js方法改变一下,然后给图片框加上 style="zoom:100%;",如下

var oImg = document.getElementById("img1");
oImg.style.zoom = parseInt(oImg.style.zoom) + (args ? +20 : -20) + '%';

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
js实现select下拉框菜单
Dec 08 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
JavaScript中的编码和解码函数
Feb 15 #Javascript
js date 格式化
Feb 15 #Javascript
JS实现最简单的冒泡排序算法
Feb 15 #Javascript
javascript设计模式之单体模式学习笔记
Feb 15 #Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 #Javascript
javascript设计模式之模块模式学习笔记
Feb 15 #Javascript
javascript设计模式之策略模式学习笔记
Feb 15 #Javascript
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
用 JSON 处理缓存
2007/04/27 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
python实现共轭梯度法
2019/07/03 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python3 反射的四种基本方法解析
2019/08/26 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
开工庆典邀请函范文
2014/01/16 职场文书
旅游节目策划方案
2014/05/26 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers