|
|
復(fù)制代碼 代碼如下:
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="在新窗口打開(kāi)圖片">'+c[i].outerHTML+'</a>'
}
else{
c[i].title="在新窗口打開(kāi)圖片";
c[i].onclick=function(e){window.open(this.src)}
}
}
}
}
window.onload=function(){
controlImg(document.getElementById("content"),670,980);
}
以前就需要這樣的代碼，但因?yàn)榫唧w的思路不是和很清楚，今天在blueidea看到的文章，特整理下。
指定區(qū)域內(nèi)的，一般用于控制內(nèi)容部分的圖片，可通過(guò)controlImg(document.getElementById("content"),670,980); 中的content,下面是測(cè)試代碼。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
下面是用css expression實(shí)現(xiàn)的方法會(huì)增加客戶(hù)端的負(fù)荷，建議用js的
假設(shè)有一個(gè)id為test的div，如何控制其內(nèi)的圖片不會(huì)撐呢？
如下定義CSS即可：
復(fù)制代碼 代碼如下:
#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);
}
如此定義后，其中的圖片寬就不會(huì)超過(guò)600，高不超過(guò)450，并按原比例值縮小！
JavaScript技術(shù)：javascript 指定區(qū)域內(nèi)圖片等比例縮放實(shí)現(xiàn)代碼 腳本之家整合版 原創(chuàng)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
