js 图片缩放(按比例)控制代码


Posted in Javascript onMay 27, 2009

缩放代码:

缩放代码: 
<script type="text/javascript"> 
//图片按比例缩放 
var flag = false; 
function DrawImage(ImgD, iwidth, iheight) { 
//参数(图片,允许的宽度,允许的高度) 
var image = new Image(); 
image.src = ImgD.src; 
if (image.width > 0 && image.height > 0) { 
flag = true; 
if (image.width / image.height >= iwidth / iheight) { 
if (image.width > iwidth) { 
ImgD.width = iwidth; 
ImgD.height = (image.height * iwidth) / image.width; 
} else { 
ImgD.width = image.width; 
ImgD.height = image.height; 
} 
ImgD.alt = image.width + "×" + image.height; 
} 
else { 
if (image.height > iheight) { 
ImgD.height = iheight; 
ImgD.width = (image.width * iheight) / image.height; 
} else { 
ImgD.width = image.width; 
ImgD.height = image.height; 
} 
ImgD.alt = image.width + "×" + image.height; 
} 
} 
} 
</script> 
页面代码: 
<img onload="javascript:DrawImage(this,89,63)" src="https://3water.com/images/logo.gif" width="89" height="63" border="0" /> 
觉得不错的发个言!

页面代码:
1. <img onload="javascript:DrawImage(this,89,63)" src="http://www.baidu.com/img/baidu_logo.gif" width="89" height="63" border="0" />
觉得不错的发个言!
Javascript 相关文章推荐
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
图片上传即时显示缩略图的js代码
May 27 #Javascript
JavaScript 闭包深入理解(closure)
May 27 #Javascript
jQuery 剧场版 你必须知道的javascript
May 27 #Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 #Javascript
jquery cookie插件代码类
May 26 #Javascript
判断脚本加载是否完成的方法
May 26 #Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 #Javascript
You might like
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
PHP实现的购物车类实例
2015/06/17 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
pandas对指定列进行填充的方法
2018/04/11 Python
基于python实现百度翻译功能
2019/05/09 Python
用python做游戏的细节详解
2019/06/25 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
红高粱观后感
2015/06/10 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL