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实现单击图片放大图片的方法
Feb 17 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
小程序中手机号识别的示例
Dec 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 array_multisort() 函数的深入解析
2013/06/20 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
PHP时间处理类操作示例
2018/09/05 PHP
php实现算术验证码功能
2018/12/05 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
python实现决策树
2017/12/21 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
对pandas中Series的map函数详解
2018/07/25 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
直接有效的自我评价
2014/01/11 职场文书
联谊会主持词
2014/03/26 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技