//图片自适应
//样式设置如下
/*
*/
//使用方法如下
/*
图片超出限制尺寸时，自动缩小到指定尺寸范围内，点击后图片后在本页面显示原尺寸图片。
图片超出限制尺寸时，自动缩小到指定尺寸范围内，点击后图片后在本页面显示原尺寸图片。
图片超出限制尺寸时，自动缩小到指定尺寸范围内，点击后图片后在本页面显示原尺寸图片。
*/
function ScreenArea() {
this.clientWidth = 0; //可见区域宽度
this.clientHeight = 0; //可见区域高度
//可见区域宽度
if (document.documentElement && document.documentElement.clientWidth) {
this.clientWidth = document.documentElement.clientWidth;
} else if (document.body && document.body.clientWidth) {
this.clientWidth = document.body.clientWidth;
} else if (window.innerWidth) {
this.clientWidth = window.innerWidth - 18;
}
if (document.documentElement && document.documentElement.clientHeight) {
this.clientHeight = document.documentElement.clientHeight;
} else if (document.body && document.body.clientHeight) {
this.clientHeight = document.body.clientHeight;
} else if (window.innerHeight) {
this.clientHeight = window.innerHeight - 18;
}
this.bodyWidth = document.body.clientWidth; //网页宽度
this.bodyHeight = document.body.clientHeight; //网页高度
this.scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
this.scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
this.scrollWidth = (document.documentElement.scrollWidth ? document.documentElement.scrollWidth : document.body.scrollWidth);
this.scrollHeight = (document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight);
}
function fit(tw, th, sw, sh) {
var temw = tw;
var temh = th;
var flag = 1;
if (sw <= tw && sh <= th) {
temw = sw;
temh = sh;
flag = 0;
} else if (sw > tw && sh <= th) {
temw = tw;
temh = sh * (tw / sw);
} else if (sw <= tw && sh > th) {
temw = tw * (th / sh);
temh = th;
} else if (sw > tw && sh > th) {
var dw = tw / sw;
var dh = th / sh;
if ((dw - dh) >= 0) {
temw = tw;
temh = sh * dw;
} else {
temw = sw * dh;
temh = th;
}
}
return { 'width': temw, 'height': temh, 'flag': flag };
}
function showImgView(imgSrc, imgWidth, imgHeight) {
var ca = new ScreenArea();
var viewMask = document.createElement("DIV");
viewMask.style.cssText = "position:absolute;filter:alpha(opacity=50);opacity:0.5;visibility:visible;background:#000;";
viewMask.style.zIndex = 1;
viewMask.style.top = 0;
viewMask.style.left = 0;
viewMask.style.width = (ca.bodyWidth) + 'px';
viewMask.style.height = (ca.bodyHeight) + 'px';
document.body.appendChild(viewMask);
var imgDiv = document.createElement("DIV");
imgDiv.style.position = 'absolute';
imgDiv.style.border = '3px solid #333333';
imgDiv.style.zIndex = 999;
//imgView.content=imgDiv;
imgDiv.style.left = Math.max((ca.scrollLeft + ((ca.clientWidth - imgWidth) / 2)), 0) + 'px';
//alert("ch="+ca.clientHeight);
imgDiv.style.top = Math.max((ca.scrollTop + ((ca.clientHeight - imgHeight) / 2)), 0) + 'px';
//alert(ca.clientHeight);
var imgObj = document.createElement("img");
imgObj.title = "Click Close";
imgObj.onclick = function() {
document.body.removeChild(imgDiv);
document.body.removeChild(viewMask);
//imgDiv.style.display='none';
//viewMask.style.display='none';
}
imgObj.src = imgSrc;
imgDiv.appendChild(imgObj);
//imgView.imgObj=imgObj;
document.body.appendChild(imgDiv);
}
function adapt(imgObj, tw, th, isView) {
var cw = parseInt(imgObj.width);
var ch = parseInt(imgObj.height);
var wh = fit(tw, th, cw, ch);
//alert('w = '+wh.width);
//alert('h = '+wh.height);
/*/以下是原著代码
imgObj.width = wh.width;
imgObj.height = wh.height;*/
//以下是修改后的代码
//========================
var image = new Image();
image.src = imgObj.src;
if (image.width > 0 && image.height > 0) {
var rate = (tw / image.width < th / image.height) ? tw / image.width : th / image.height;
if (rate <= 1) {
imgObj.width = image.width * rate;
imgObj.height = image.height * rate;
}
else {
imgObj.width = image.width;
imgObj.height = image.height;
}
}
//===================================
//alert('flag = '+wh.flag);
if (wh.flag != 0 && isView) {
imgObj.title = "Click to view larger image";
imgObj.style.cursor = 'pointer';
imgObj.onclick = function() {
//alert('click');
showImgView(imgObj.src, cw, ch);
}
}
}
function AutoFit(imgObj, tw, th) {
//alert("hello");
var cw = parseInt(imgObj.width);
var ch = parseInt(imgObj.height);
var wh = ScaleFit(tw, th, cw, ch);
imgObj.width = wh.width;
imgObj.height = wh.height;
}
//按比例缩放
function ScaleFit(tw, th, sw, sh) {
var temw = tw;
var temh = th;
var flag = 1;
if (sw <= tw && sh <= th) {
temw = sw;
temh = sh;
flag = 0;
} else {
temw = tw / sw;
temh = th / sh;
scale = Math.min(temw, temh);
temw = sw * scale;
temh = sh * scale;
}
return { 'width': temw, 'height': temh, 'flag': flag };
}