图片弹出层技巧
网页图片的放大和缩小是网页制作过程中经常遇到的必须掌握的技巧。下面介绍两种网上比较好的弹出层效果。
第一种（http://www.uuzuo.com/demo/r/）：
效果还是很不错的，单击图片，在浏览器中心能够放大图片，然后背景颜色变暗。但这个效果最好需要设置其中一个参数，由absolute改成relative，这样浏览器没有最大化的时候也能够让放大的图片处在正中心。下面上代码：
<!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=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>弹出层浏览图片</title> <mce:style type="text/css"><!-- #page{width:960px;margin:20px auto;} --></mce:style><style type="text/css" mce_bogus="1">#page{width:960px;margin:20px auto;}</style> </head> <body> <div id="page"> <p><img src="1.jpg" mce_src="1.jpg" rel="1.jpg" id="so1" onclick='showimg.show(this.id)' height="200" width="200" /></p> <p><img src="2.jpg" mce_src="2.jpg" rel="2.jpg" id="so2" onclick='showimg.show(this.id)' height="200" width="200" /></p> <p><img src="3.jpg" mce_src="3.jpg" rel="3.jpg" id="so3" onclick='showimg.show(this.id)' height="200" width="200" /></p> </div> <mce:script type="text/javascript"><!-- var showimg = { bgopacity:0.8, thisimg:'', imgsrc:'', loadimgsrc:'loading.gif', loadimgages:new Array(), show:function(imgid){ var obj = document.getElementById(imgid); showimg.imgsrc = obj.getAttribute('rel'); if(showimg.imgsrc=='')return; var scrollTop,winHeight; var bgdiv=document.createElement("div"); bgdiv.id = 'showimagesbg'; bgdiv.style.position="absolute"; bgdiv.style.top=0; bgdiv.style.left=0; bgdiv.style.zIndex=50; if (window.innerHeight){ winHeight = window.innerHeight; }else if((document.body)&&(document.body.clientHeight)){ winHeight = document.body.clientHeight; } if (document.documentElement && document.documentElement.clientHeight){ winHeight = document.documentElement.clientHeight;} if(winHeight < document.body.clientHeight)winHeight=document.body.scrollHeight; bgdiv.style.height = winHeight + "px"; bgdiv.style.filter="alpha(opacity="+(showimg.bgopacity*100)+")"; bgdiv.style.opacity=showimg.bgopacity; bgdiv.style.MozOpacity=showimg.bgopacity; bgdiv.style.backgroundColor="#000"; bgdiv.style.width=document.documentElement.clientWidth+"px"; document.body.appendChild(bgdiv); if(document.documentElement&&document.documentElement.scrollTop){ scrollTop=document.documentElement.scrollTop; }else if(document.body){scrollTop=document.body.scrollTop;} var boxdiv = document.createElement('div'); boxdiv.id = 'showimagesbox'; boxdiv.style.position="absolute"; boxdiv.style.top=scrollTop+10+"px" boxdiv.style.width=150+"px" boxdiv.style.zIndex=51; boxdiv.style.backgroundColor="#fff"; boxdiv.style.padding='5px'; boxdiv.style.left=(document.body.scrollWidth-150)/2+"px"; boxdiv.style.textAlign = 'center'; document.body.appendChild(boxdiv); var simg = document.createElement('img'); simg.id = 'showimagesimg'; simg.style.cursor = 'pointer'; simg.style.margin = '0px'; simg.src = showimg.loadimgsrc; simg.onclick=function(){showimg.close();}; boxdiv.appendChild(simg); /* var closea = document.createElement('a'); closea.innerHTML == '关闭'; closea.href = 'javascript:showimg.close();'; boxdiv.appendChild(closea); */ showimg.thisimg = imgid; var isload = 0; for(var s = 0;s<showimg.loadimgages.length;s++){ if(showimg.loadimgages[s]==showimg.imgsrc){ isload=1; } } if(isload){ simg.src = showimg.imgsrc; boxdiv.style.left=(document.body.scrollWidth-simg.offsetWidth)/2+"px"; boxdiv.style.width = simg.width+'px'; }else{ showimg.getimg(); showimg.loadimgages[showimg.loadimgages.length] = showimg.imgsrc; } }, close:function(){ var bgdiv = document.getElementById('showimagesbg'); var boxdiv = document.getElementById('showimagesbox'); var simg = document.getElementById('showimagesimg'); boxdiv.removeChild(simg); document.body.removeChild(bgdiv); document.body.removeChild(boxdiv); }, imgonload:function(myimg){ document.getElementById('showimagesbox').style.left=(document.body.scrollWidth-myimg.width-10)/2+"px"; document.getElementById('showimagesimg').src = showimg.imgsrc; document.getElementById('showimagesbox').style.width = myimg.width+'px'; }, getimg:function(){ var myimg=new Image(); myimg.onload = function(){ showimg.imgonload(myimg); }; myimg.src=showimg.imgsrc; } }; // --></mce:script> </body> </html>
这个代码，思路还是很简单的，无非生成新的层，然后设置其显示属性。但我在用个过程中遇到了一个问题，就是刚开始打开图片的时候，第一次点击图片，左右出现的空白会多出很多，在我要嵌入的MFC中尤其显得明显，这个问题纠结了很久也没有解决。于是我只好去寻找别的效果。呵呵，运气不错，下面这个，应该说是我最中意的了。
第二种（不好意思，忘了收藏了）：
这个是采用了链接的效果展示的，使用起来非常方便。这个也是要修改其中一个参数，改成relative，下面这个程序已经改好了：
<!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" xml:lang="zh"> <head> <title>小图弹大图</title> <mce:style type="text/css"><!-- body { background:#f1f1f1; margin:0 } #workDemo { width:100%; } #workDemo a { width: 150px; height:150px; margin:5px; padding:0; border:gray 5px solid; float:left; overflow:hidden; text-decoration:none; display:block; position:relative } #workDemo a span { display:none; } #workDemo a img { border:none; } #workDemo a:hover { border-color:red; } #workDemo a:hover span { position:relative; background:red; color:white; width:100%; padding-top:3px; text-align:center; right:0; bottom:0; display:block; font-size:11px; filter: Alpha(Opacity=60);Opacity:0.6; } --></mce:style><style type="text/css" mce_bogus="1"> body { background:#f1f1f1; margin:0 } #workDemo { width:100%; } #workDemo a { width: 150px; height:150px; margin:5px; padding:0; border:gray 5px solid; float:left; overflow:hidden; text-decoration:none; display:block; position:relative } #workDemo a span { display:none; } #workDemo a img { border:none; } #workDemo a:hover { border-color:red; } #workDemo a:hover span { position:relative; background:red; color:white; width:100%; padding-top:3px; text-align:center; right:0; bottom:0; display:block; font-size:11px; filter: Alpha(Opacity=60);Opacity:0.6; } </style> </head> <body> <div id="workDemo"> <a href="#" mce_href="#"><img src="50.jpg" mce_src="50.jpg" height=150 width=150/><span>把浏览器窗口放小后点击</span></a> <a href="#" mce_href="#"><img src="50.jpg" mce_src="50.jpg" height=150 width=150/><span>把浏览器窗口放小后点击</span></a> </div> <mce:script type="text/javascript"><!-- function ImgShow(evt){ var imgTag=(window.event)?event.srcElement:evt.target; var imgPath=imgTag.src.replace(//_/d/./,"_4.");//取得弹出的大图url var tagTop=Math.max(document.documentElement.scrollTop,document.body.scrollTop); var tag=document.createElement("div"); tag.style.cssText="width:100%;height:"+Math.max(document.body.clientHeight,document.body.offsetHeight,document.documentElement.clientHeight)+"px;position:absolute;background:black;top:0;filter: Alpha(Opacity=80);Opacity:0.8;"; tag.ondblclick=closes; var tagImg=document.createElement("div"); tagImg.style.cssText="font:12px /18px verdana;overflow:auto;text-align:center;position:absolute;width:200px;border:5px solid white;background:white;color:white;left:"+(parseInt(document.body.offsetWidth)/2-100)+"px;top:"+(document.documentElement.clientHeight/3+tagTop)+"px;" tagImg.innerHTML="<div style="padding:10px;background:#cccccc;border:1px solid white" mce_style="padding:10px;background:#cccccc;border:1px solid white"><img src="/jscss/demoimg/loading.gif" mce_src="jscss/demoimg/loading.gif" /><br /><br /><b style="color:#999999;font-weight:normal" mce_style="color:#999999;font-weight:normal">Image loading...</b><br /></div>"; tagImg.oncontextmenu=function(){var clsOK=confirm("确定要取消图片显示吗?点击确定将关闭图片。/n如果您是想缩放图片请在图片上双击。"); if(clsOK){closes();};return false}; var closeTag=document.createElement("div"); closeTag.style.cssText="display:none;position:absolute;left:10px;top:10px;color:black;"; var closesHtml="<b style="background:red;border:1px solid white;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;" mce_style="background:red;border:1px solid white;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;"> 关闭 </b>"; closeTag.innerHTML=closesHtml+" 提示:双击图片缩放"; closeTag.onclick=closes; document.body.appendChild(tag); document.body.appendChild(tagImg); var img=new Image(); img.src=imgPath; img.style.cssText="border:1px solid #cccccc;filter: Alpha(Opacity=0);Opacity:0;cursor:pointer"; var barShow,imgTime; img.complete?ImgOK():img.onload=ImgOK; function ImgOK(){ var Stop1=false,Stop2=false,temp=0; var tx=tagImg.offsetWidth,ty=tagImg.offsetHeight; var ix=img.width,iy=img.height; var sx=document.documentElement.clientWidth,sy=window.innerHeight||document.documentElement.clientHeight; if(iy>sy||ix>sx){ var yy=sy-100; var xx=(ix/iy)*yy; }else{ var xx=ix+4; var yy=iy+3; } img.style.width=xx-4+'px'; img.style.height=yy-3+'px'; if(ix<sx&&iy<sy){tagImg.alt="";closeTag.innerHTML=closesHtml;}; var maxTime=setInterval(function(){ temp+=35; if((tx+temp)<xx){ tagImg.style.width=(tx+temp)+"px"; tagImg.style.left=(sx-(tx+temp))/2+"px"; }else{ Stop1=true; tagImg.style.width=xx+"px"; tagImg.style.left=(sx-xx)/2+"px"; } if((ty+temp)<yy){ tagImg.style.height=(ty+temp)+"px"; tagImg.style.top=(tagTop+((sy-(ty+temp))/2))+"px"; }else{ Stop2=true; tagImg.style.height=yy+"px"; tagImg.style.top=(tagTop+((sy-yy)/2))+"px"; } if(Stop1&&Stop2){ clearInterval(maxTime); tagImg.appendChild(img); temp=0; imgOPacity(); } },1); function imgOPacity(){ temp+=10; img.style.filter="alpha(opacity="+temp+")"; img.style.opacity=temp/100; imgTime=setTimeout(imgOPacity,1) if(temp>100) clearTimeout(imgTime); } tagImg.innerHTML=""; tagImg.appendChild(closeTag); if(ix>xx||iy>yy){ img.alt="左键拖动,双击放大缩小"; img.ondblclick=function (){ if(tagImg.offsetWidth<img.offsetWidth||tagImg.offsetHeight<img.offsetHeight){ img.style.width="auto"; img.style.height="100%"; img.alt="双击可以放大"; img.onmousedown=null; closeTag.style.top="10px"; closeTag.style.left="10px"; tagImg.style.overflow="visible"; tagImg.style.width=img.offsetWidth+"px"; tagImg.style.left=((sx-img.offsetWidth)/2)+"px"; }else{ img.style.width=ix+"px"; img.style.height=iy+"px"; img.alt="双击可以缩小"; img.onmousedown=dragDown; tagImg.style.overflow="auto"; tagImg.style.width=(ix<sx-100?ix+20:sx-100)+"px"; tagImg.style.left=((sx-(ix<sx-100?ix+20:sx-100))/2)+"px"; } } img.onmousedown=dragDown; tagImg.onmousemove=barHidden; tagImg.onmouseout=moveStop; document.onmouseup=moveStop; }else{ tagImg.style.overflow="visible"; tagImg.onmousemove=barHidden; } } function dragDown(a){ img.style.cursor="move"; var evts=a||window.event; var onx=evts.clientX,ony=evts.clientY; var sox=tagImg.scrollLeft,soy=tagImg.scrollTop; var sow=img.width+2-tagImg.clientWidth,soh=img.height+2-tagImg.clientHeight; var xxleft,yytop; document.onmousemove=function(e){ var evt=e||window.event; xxleft=sox-(evt.clientX-onx)<0?"0":sox-(evt.clientX-onx)>sow?sow:sox-(evt.clientX-onx); yytop=soy-(evt.clientY-ony)<0?"0":soy-(evt.clientY-ony)>soh?soh:soy-(evt.clientY-ony); tagImg.scrollTop=yytop; tagImg.scrollLeft=xxleft; closeTag.style.top=(yytop+10)+"px"; closeTag.style.left=(xxleft+10)+"px"; return false; } return false; } function barHidden(){ clearTimeout(barShow); closeTag.style.top=(tagImg.scrollTop+10)+"px"; closeTag.style.left=(tagImg.scrollLeft+10)+"px"; if(closeTag.style.display=="none")closeTag.style.display="block"; barShow=setTimeout(function(){closeTag.style.display="none";},1000); } function closes(){ document.body.removeChild(tag); document.body.removeChild(tagImg); clearTimeout(barShow); clearTimeout(imgTime); document.onmouseup=null; tag=img=tagImg=closeTag=null; } function moveStop(){ document.onmousemove=null; tagImg.onmousemove=barHidden; img.style.cursor="pointer"; } } //事件绑定部分 if(document.getElementById("workDemo")){ var workTag=document.getElementById("workDemo"); var workImg=workTag.getElementsByTagName("img"); //注册此处会把 workDemo下的所有img选中，包括子集下的子集。 var worka=workTag.getElementsByTagName("a"); for(var i=0; i<workImg.length; i++){workImg[i].onclick=ImgShow;worka[i].href="##"} } // --></mce:script> </body> </html>
以上就是我所看到的比较好的图片放大弹出层效果了。以后遇到了继续补充。