js实现兼容IE、Firefox的图片缩放代码


Posted in Javascript onDecember 08, 2015

本文实例讲述了js实现兼容IE、Firefox的图片缩放代码。分享给大家供大家参考,具体如下:

function SetSize(obj, width, height) {
  myImage = new Image();
  myImage.src = obj.src;
  if (myImage.width > 0 && myImage.height > 0) {
    var rate = 1;
    if (myImage.width > width || myImage.height > height) {
      if (width / myImage.width < height / myImage.height) {
        rate = width / myImage.width;
      } else {
        rate = height / myImage.height;
      }
    }
    if (window.navigator.appName == "Microsoft Internet Explorer") {
      obj.style.zoom = rate;
    } else {
      obj.width = myImage.width * rate;
      obj.height = myImage.height * rate;
    }
  }
}

用法:

<img src="img/offer/41936519.jpg" border="0" style="zoom: 0.1" onload="SetSize(this, 80, 60)"/>

这种方法在IE、FIREFOX、OPERA、NETSCAPE测试都适用。

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

Javascript 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 #Javascript
JS获取文件大小方法小结
Dec 08 #Javascript
js+ajax实现获取文件大小的方法
Dec 08 #Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 #Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 #Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 #Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 #Javascript
You might like
详细介绍PHP应用提速面面观
2006/10/09 PHP
php 错误处理经验分享
2011/10/11 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
SQL面试题
2013/04/30 面试题
创新型城市实施方案
2014/03/06 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
征兵宣传标语
2014/06/20 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android