当前位置: 首页 > 图文教程 > 网络编程 > Javascript > [原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版

Javascript
Jquery 基础学习笔记
javascript 进度条的几种方法
Jquery中的offset()和position()深入剖析
基于Jquery 好友选择器V2.0
AJAX 仿EXCEL表格功能
网页和浏览器兼容性问题汇总(draft1)
JAVASCRIPT 点击显示 隐藏层
jQuery 学习 几种常用方法
JavaScript 动态改变图片大小
javascript 树控件 比较好用
Javascript Tab 导航插件 (23个)
JavaScript talbe表中指定位置插入一行的实现代码 修正版
js 操作css实现代码
Javascript 错误处理的几种方法
FireFox JavaScript全局Event对象
jquery.alert 弹出式复选框实现代码
jQuery Ajax文件上传(php)
jquery 上下滚动广告
JS 拼图游戏 面向对象,注释完整。
javascript 控制图片播放代码

Javascript 中的 [原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 127 ::
收藏到网摘: n/a

javascript 区域内 图片等比例缩放实现代码 软晨学习网整合版,兼容ie跟firefox。 软晨学习网整合篇,欢迎转载。
复制代码 代码如下:

function controlImg(ele,w,h){
var c=ele.getElementsByTagName("img");
for(var i=0;i<c.length;i++){
var w0=c[i].clientWidth,h0=c[i].clientHeight;
var t1=w0/w,t2=h0/h;
if(t1>1||t2>1){
c[i].width=Math.floor(w0/(t1>t2?t1:t2));
c[i].height=Math.floor(h0/(t1>t2?t1:t2));
if(document.all){
c[i].outerHTML='<a href="'+c[i].src+'" target="_blank" title="在新窗口打开图片">'+c[i].outerHTML+'</a>'
}
else{
c[i].title="在新窗口打开图片";
c[i].onclick=function(e){window.open(this.src)}
}
}
}
}
window.onload=function(){
controlImg(document.getElementById("content"),670,980);
}

以前就需要这样的代码,但因为具体的思路不是和很清楚,今天在blueidea看到的文章,特整理下。
指定区域内的,一般用于控制内容部分的图片,可通过controlImg(document.getElementById("content"),670,980); 中的content,下面是测试代码。

[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

下面是用css expression实现的方法会增加客户端的负荷,建议用js的
假设有一个id为test的div,如何控制其内的图片不会撑呢?
  如下定义CSS即可:
复制代码 代码如下:

  #test IMG{
  border:0;
  margin:0;
  padding:0;
  max-width:600px;
  width:expression(this.width>600?"600px":this.width);
  max-height:450px;
  height:expression(this.height>450?"450px":this.height);
  }

  如此定义后,其中的图片宽就不会超过600,高不超过450,并按原比例值缩小!