shawl.qiu javascript 智能弹出窗口函数 fSmartDisplayImg

来源：互联网发布：政府办事大厅网络建设编辑：程序博客网时间：2024/05/22 10:39

shawl.qiu javascript 智能弹出窗口函数 fSmartDisplayImg

说明:
这个函数主要应用于从缩略图点击时显示大图, 使用弹出窗口友好显示...

如你有 images 文件夹
images 下有目录 thumb, 也就是 images/thumb/

images 用于存放大图片, images/thumb/ 用于存放大图片的缩略图图片

网页显示时, 显示缩略图...添加点击事件后就自动显示大图...

其实我可以有N种方法实现, 不过最终还是选择 js 实现, 这个是在客户端...
从服务端处理这些该死的图片内容要浪费资源和浪费数据表字段...

shawl.qiu
2007-05-02
http://blog.csdn.net/btbtd

内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template</title>
<script type="text/javascript">
//<![CDATA[
function fSmartDisplayImg(oImg, sForRemovePath, sCharset, bDebug)
{ // sForRemovePath: /path/
var Debug = bDebug;
var smallurl = "";
if(typeof(oImg)=="object")
{
smallurl = oImg.src;
}
else
{
smallurl = oImg;
}
if(typeof(sForRemovePath)=="boolean")
{
if(sForRemovePath)
{
sForRemovePath = "/thumb/";
}
else
{
sForRemovePath = "afksjdkfjasdfkjaskdfjaskdfj9089";
}
}
else
{
sForRemovePath = sForRemovePath||"/thumb/";
}
var sCharset = sCharset||"utf-8";
var re=new RegExp(sForRemovePath, "i");
var bigurl = smallurl.replace(re, "/");
var iWidthPlus = 0;
if(fIsIe())
{
iWidthPlus = 16;
}
var oBigImg = new Image();
with(oBigImg)
{
src=bigurl;
}
if(oBigImg.width>0)
{
fWinPopup(oBigImg.src, oBigImg.width+iWidthPlus, oBigImg.height);
}
else
{
oInterval = setInterval
(
function()
{
if(oBigImg.width>0)
{
clearInterval(oInterval);
fWinPopup(oBigImg.src, oBigImg.width+iWidthPlus, oBigImg.height);
}
}
,
50
)
oBigImg.onerror =
function()
{
alert("failed to loading img: "+oBigImg.src);
};
}
if(Debug)
{
alert("function fSmartDisplayImg: ok");
alert("oImg.src: "+oImg.src);
alert("bigurl: "+bigurl);
alert("oBigImg.src: "+oBigImg.src);
}
function fIsIe()
{
return navigator.appName=='Microsoft Internet Explorer';
}
function fWinPopup(sUrl, iWidth, iHeight, sCharset, sAddition){
var sCharset = sCharset||"utf-8";
try{oPopup.close()}catch(e){}
if(!sUrl)return false;
if(!iWidth)iWidth=screen.availWidth-200;
if(!iHeight)iHeight=screen.availHeight-150;
if(!sAddition)sAddition='';
var iMrgHor=(screen.availWidth-iWidth)/2;
var iMrgVtc=(screen.availHeight-iHeight)/2;
oPopup=open('about:blank','sqPopup','width='+iWidth+',height='+iHeight+',left='+iMrgHor
+',top='+iMrgVtc+',scrollbars'+sAddition);
oPopup.document.write(
"<meta http-equiv=/"Content-Type/" content=/"text/html; charset="+sCharset+"/">"
);
oPopup.document.write(
'<img src="'+sUrl+'"/>',
'<style>body{margin:0; padding:0;}<//style>'
);
oPopup.document.close();
oPopup.focus();
oPopup.document.ondblclick=function(){oPopup.close();}
oPopup.document.onkeydown=function(){ if(oPopup.event.keyCode==27)oPopup.close(); }
} // shawl.qiu script
} // end function fSmartDisplayImg
//]]>
</script>
</head>
<body>
<img src="images/thumb/246.jpg" onclick="fSmartDisplayImg(this, '/thumb/');" />
</body>
</html>