javascript 指定區(qū)域內圖片等比例縮放實現代碼腳本之家整合版原創(chuàng)

原創(chuàng) 更新時間：2009年10月24日 15:23:56 原創(chuàng) 作者：

javascript 區(qū)域內圖片等比例縮放實現代碼腳本之家整合版，兼容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看到的文章，特整理下。
指定區(qū)域內的，一般用于控制內容部分的圖片，可通過controlImg(document.getElementById("content"),670,980); 中的content,下面是測試代碼。

<body> <img src="http://www.fzitv.net/images/logo.gif" /> 下面是要控制的區(qū)域。 <div   class="wppm3vysvbp"   id="dxy"> 原圖 <center><img alt='photoshop 圖片調色教程 蒼白皮膚的冷酷美女' height="972" width="648" src="http://img.jbzj.com/file_images/photoshop/200910/200910241416206868.jpg" /></center>　　教程圖層： 　　一 打開原圖 復制一層 　　二 執(zhí)行圖層&lt;新建調整圖層&lt;色相/飽和度 參數不講解 　　三 執(zhí)行圖層&lt;新建調整圖層&lt;曲線 　　四 去色 然后降低不透明度 　　五 執(zhí)行圖層&lt;新建調整圖層&lt;亮度/對比度 <center><img alt='photoshop 圖片調色教程 蒼白皮膚的冷酷美女' height="538" width="800" src="http://img.jbzj.com/file_images/photoshop/200910/200910241416206969.jpg" /></center> </div> 這下面是不需要控制的區(qū)域，大家可以參考下。 原圖 <center><img alt='photoshop 圖片調色教程 蒼白皮膚的冷酷美女' height="972" width="648" src="http://img.jbzj.com/file_images/photoshop/200910/200910241416206868.jpg" /></center>　　教程圖層： 　　一 打開原圖 復制一層 　　二 執(zhí)行圖層&lt;新建調整圖層&lt;色相/飽和度 參數不講解 　　三 執(zhí)行圖層&lt;新建調整圖層&lt;曲線 　　四 去色 然后降低不透明度 　　五 執(zhí)行圖層&lt;新建調整圖層&lt;亮度/對比度 <center><img alt='photoshop 圖片調色教程 蒼白皮膚的冷酷美女' height="538" width="800" src="http://img.jbzj.com/file_images/photoshop/200910/200910241416206969.jpg" /></center> </body>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

下面是用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，并按原比例值縮小！

您可能感興趣的文章: