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 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
bootstrap表单示例代码分享
May 18 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
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+java实现自动新闻滚动窗口
2006/10/09 PHP
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
php mysql 封装类实例代码
2016/09/18 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Django中信号signals的简单使用方法
2019/07/04 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
Python super()方法原理详解
2020/03/31 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
公司综合部的成员自我评价分享
2013/11/05 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript