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 相关文章推荐
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
Javascript之Math对象详解
Jun 07 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
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
php 进度条实现代码
2009/03/10 PHP
PHP 文件类型判断代码
2009/03/13 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Python小进度条显示代码
2019/03/05 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
工作决心书范文
2014/03/11 职场文书
神龙架导游词
2015/02/11 职场文书
诚信教育主题班会
2015/08/13 职场文书
高一数学教学反思
2016/02/18 职场文书