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">
- <!-- DW6 -->
- <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>