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所必须要知道的一些
Mar 07 Javascript
Aptana调试javascript图解教程
Nov 30 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
js使用递归解析xml
Dec 12 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
Vue中qs插件的使用详解
Feb 07 Javascript
JS实现拖动模糊框特效
Aug 25 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
python类定义的讲解
2013/11/01 Python
Python 列表list使用介绍
2014/11/30 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
django 消息框架 message使用详解
2019/07/22 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
分层教学实施方案
2014/03/19 职场文书
软件项目开发计划书
2014/05/01 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
大学生入党自传2015
2015/06/26 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python