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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
js判断变量是否空值的代码
Oct 26 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
js 窗口抖动示例
Sep 04 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
react redux入门示例
Apr 19 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
Vue实现多页签组件
Jan 14 Vue.js
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采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
js实现简单的可切换选项卡效果
2015/04/10 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python何时应该使用Lambda函数
2019/07/02 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Django操作session 的方法
2020/03/09 Python
基于Python绘制个人足迹地图
2020/06/01 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
一套带网友答案的.NET笔试题
2016/12/06 面试题
写好自荐信的几个要点
2013/12/26 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
审计主管岗位职责
2014/01/31 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
公司聚餐通知
2015/04/22 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL