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中ajax调用json数据的使用说明
Mar 17 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
AngularJS基础知识
Dec 21 Javascript
js获取form的方法
May 06 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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 flock 文件锁详细介绍
2012/12/29 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
解读python logging模块的使用方法
2018/04/17 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python内置加密模块用法解析
2019/11/25 Python
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
企业年检委托书范本
2014/10/14 职场文书
求职自荐信怎么写
2015/03/04 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
Java界面编程实现界面跳转
2022/06/16 Java/Android