最近，工作上需要上传预览本地图片，所以，写了一个，当时遇到ie7的一个比较特殊的问题
IE7需要用到DXImageTransform.Microsoft.AlphaImageLoader来解决，但是这个又有一个问题，
我对滤镜不熟悉，不知道怎么控制大小，所以，只能用多层div来解决这个问题，
这个效果达到了工作的目的
/*
* 函数名称: ViewImage
* 作 者: yithcn
* 功能说明: 预览图片，文字类描述
* 使用说明: var view = new ViewImage(null,null, 600, 350);
* view.view(null, src, 'View Image');
* 创建日期: 2010.10.12
*/
//tab 目前没有用到
//dest 目标位置，可为空
//viewtype 文字性的内容还是图片
function ViewImage(tab, dest, width, height, viewtype) {
this.construct(tab, dest, width, height, viewtype);
};
//属性
ViewImage.prototype.closeBtnImage = "button_close.gif";
ViewImage.prototype.width = 400;
ViewImage.prototype.height = 400;
ViewImage.prototype.key = new Date().getMilliseconds();
ViewImage.prototype.tab = null;
ViewImage.prototype.bgdiv = null;
ViewImage.prototype.viewdiv = null;
ViewImage.prototype.info = null;
ViewImage.prototype.image = null;
ViewImage.prototype.closeBtn = null;
ViewImage.prototype.title = null;
ViewImage.prototype.zIndex = 1000;
ViewImage.prototype.btnTop = 0;
ViewImage.prototype.viewType = "img";
ViewImage.prototype.dest = null;
ViewImage.prototype.bgCssText = "display: none; position: absolute; background-color: Gray; filter: alpha(opacity=30); -moz-opacity: 0.4; opacity: 0.4; width: 100%;height: 600px;";
//初始化属性
ViewImage.prototype.construct = function(tab, dest, width, height, viewtype) {
this.width = width ? (width > document.body.clientWidth ? document.body.clientWidth : width) : this.width;
this.height = height ? (height > document.body.clientHeight ? document.body.clientHeight : height) - 30 : this.height;
this.tab = tab || null;
this.viewType = viewtype || this.viewType;
if (typeof dest == "string")
dest = document.getElementById(dest);
this.dest = dest;
};
//创建一定的html代码，如果dest存在就不创建
ViewImage.prototype.buildHTML = function() {
var that = this;
var html = '<div id="bgdiv_' + that.key + '" style="z-index: ' + that.zIndex + ';"></div>';
html += '<div id="viewdiv_' + that.key + '" style="position: absolute; display: none; width: ' + that.width + '; height: ' + that.height + ';z-index: ' + (that.zIndex + 1) + ';">';
html += '<div style="background-color:#6D84B4;padding:0px 5px;height:30px;line-height:30px;font-family:verdana, arial, helvetica; font-size:12px;">';
html += '<div style="width:88%;float:left;text-align:left;"><font color="White"><span id="span_title_' + that.key + '"></span></font></div>';
html += '<div style="width:12%;float:right;text-align:right;padding:6px 0px;"><img id="but_close_' + that.key + '" src="' + that.closeBtnImage + '"></div>';
html += '</div>';
html += '<div id="info_' + that.key + '" style="text-align:center;background-color:#ffffff;overflow:auto;width: ' + that.width + '; height: ' + (that.height - 20) + ';"></div>';
html += '</div>';
return html;
};
//隐藏
ViewImage.prototype.hide = function() {
this.bgdiv.style.display = 'none';
this.viewdiv.style.display = 'none';
this.setOverflow("auto");
};
//生成html之类的
ViewImage.prototype.create = function(src, title) {
var that = this;
if (!that.dest) {
if (!document.getElementById("body_div_temp_")) {
var div = document.createElement("div");
div.id = "body_div_temp_";
div.innerHTML = that.buildHTML();
document.body.appendChild(div);
}
that.bgdiv = document.getElementById("bgdiv_" + that.key);
that.viewdiv = document.getElementById("viewdiv_" + that.key);
that.closeBtn = document.getElementById("but_close_" + that.key);
that.title = document.getElementById("span_title_" + that.key);
that.bgdiv.style.cssText += that.bgCssText;
title = title || "View Image";
that.title.innerHTML = title;
that.info = document.getElementById("info_" + that.key);
}
else {
that.info = that.dest;
}
that.info.innerHTML = "";
if (that.viewType == "img") {
var ie = parseInt(that.sys());
//ie7特殊处理
if (ie == 7) {
that.info.innerHTML = '<div id="xDiv" style="width:100px;height:100px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\',sizingMethod=\'image\');"></div>';
}
else {
var img = document.createElement('img');
img.src = src;
that.image = img;
that.info.insertBefore(img, null);
}
}
else {
that.info.style.textAlign = "left";
that.info.innerHTML = src;
}
};
//获取ie版本
ViewImage.prototype.sys = function() {
var ua = navigator.userAgent.toLowerCase();
var s = ua.match(/msie ([\d.]+)/);
return s ? s[1] : -1;
};
//计算显示窗口的位置，当图片很大的时候，自动适应满屏
ViewImage.prototype.setWH = function() {
var that = this;
that.bgdiv.style.top = 0;
that.bgdiv.style.left = 0;
that.bgdiv.style.display = '';
that.viewdiv.style.display = '';
var height = parseInt(document.body.scrollHeight < document.body.clientHeight ? document.body.clientHeight : document.body.scrollHeight);
that.bgdiv.style.height = height;
if (that.image && that.image.width > that.width) {
var w = (that.image.width > document.body.clientWidth ? document.body.clientWidth : that.image.width) - 40;
that.viewdiv.style.width = w;
that.info.style.width = w;
}
else {
that.viewdiv.style.width = that.width;
that.info.style.width = that.width;
}
if (that.image && that.image.height > that.height) {
var h = (that.image.height > document.body.clientHeight ? document.body.clientHeight : that.image.height) - 50;
that.viewdiv.style.height = h;
that.info.style.height = h;
}
else {
that.viewdiv.style.height = that.height;
that.info.style.height = that.height;
}
var top = 0;
if (that.btnTop < parseInt(that.viewdiv.style.height)) {
top = parseInt(document.body.clientHeight / 2 - parseInt(that.viewdiv.style.height) / 2) - 15;
}
else {
top = that.btnTop - (that.btnTop - document.body.scrollTop);
var top1 = parseInt(document.body.clientHeight / 2 - parseInt(that.viewdiv.style.height) / 2) - 15;
top += top1;
}
that.viewdiv.style.top = top;
var left = parseInt(document.body.clientWidth / 2 - parseInt(that.viewdiv.style.width) / 2);
that.viewdiv.style.left = left;
};
//隐藏滚动条
ViewImage.prototype.setOverflow = function(type) {
document.body.style.overflow = type;
};
//获取点击位置
ViewImage.prototype.getPos = function(e) {
if (e) {
var t = e.offsetTop;
var l = e.offsetLeft;
var height = e.offsetHeight;
while (e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
this.btnTop = t;
}
};
//显示
ViewImage.prototype.view = function(btn, src, title) {
var that = this;
that.setOverflow("hidden");
that.getPos(btn);
that.create(src, title);
if (!that.dest) {
setTimeout(function() { that.setWH(); }, 0);
var fn = function() { that.hide(); };
if (that.closeBtn.addEventListener) {
that.closeBtn.addEventListener('click', fn, false);
}
else if (that.closeBtn.attachEvent) {
that.closeBtn.attachEvent('onclick', fn);
}
}
};
网盘下载:http://www.yithcn.com/u/pickupfile.htm?fileid=361c6e11f948
