js弹出层效果

js

var TINY={}; function T$(i){return document.getElementById(i)} TINY.box=function(){ var p,m,b,fn,ic,iu,iw,ih,ia,f=0; return{ show:function(c,u,w,h,a,t){ if(!f){ p=document.createElement('div'); p.id='tinybox'; m=document.createElement('div'); m.id='tinymask'; b=document.createElement('div'); b.id='tinycontent'; document.body.appendChild(m); document.body.appendChild(p); p.appendChild(b); m.onclick=TINY.box.hide; window.onresize=TINY.box.resize; f=1 } if(!a&&!u){ p.style.width=w?w+'px':'auto'; p.style.height=h?h+'px':'auto'; p.style.backgroundImage='none'; b.innerHTML=c }else{ b.style.display='none'; p.style.width=p.style.height='100px' } this.mask(); ic=c; iu=u; iw=w; ih=h; ia=a; this.alpha(m,1,80,3); if(t){setTimeout(function(){TINY.box.hide()},1000*t)} }, fill:function(c,u,w,h,a){ if(u){ p.style.backgroundImage=''; var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP'); x.onreadystatechange=function(){ if(x.readyState==4&&x.status==200){TINY.box.psh(x.responseText,w,h,a)} }; x.open('GET',c,1); x.send(null) }else{ this.psh(c,w,h,a) } }, psh:function(c,w,h,a){ if(a){ if(!w||!h){ var x=p.style.width, y=p.style.height; b.innerHTML=c; p.style.width=w?w+'px':''; p.style.height=h?h+'px':''; b.style.display=''; w=parseInt(b.offsetWidth); h=parseInt(b.offsetHeight); b.style.display='none'; p.style.width=x; p.style.height=y; }else{ b.innerHTML=c } this.size(p,w,h,4) }else{ p.style.backgroundImage='none' } }, hide:function(){ TINY.box.alpha(p,-1,0,5) }, resize:function(){ TINY.box.pos(); TINY.box.mask() }, mask:function(){ m.style.height=TINY.page.theight()+'px'; m.style.width=''; m.style.width=TINY.page.twidth()+'px' }, pos:function(){ var t=(TINY.page.height()/2)-(p.offsetHeight/2); t=t<10?10:t; p.style.top=(t+TINY.page.top())+'px'; p.style.left=(TINY.page.width()/2)-(p.offsetWidth/2)+'px' }, alpha:function(e,d,a,s){ clearInterval(e.ai); if(d==1){ e.style.opacity=0; e.style.filter='alpha(opacity=0)'; e.style.display='block'; this.pos() } e.ai=setInterval(function(){TINY.box.twalpha(e,a,d,s)},20) }, twalpha:function(e,a,d,s){ var o=Math.round(e.style.opacity*100); if(o==a){ clearInterval(e.ai); if(d==-1){ e.style.display='none'; e==p?TINY.box.alpha(m,-1,0,3):b.innerHTML=p.style.backgroundImage='' }else{ e==m?this.alpha(p,1,100,5):TINY.box.fill(ic,iu,iw,ih,ia) } }else{ var n=o+Math.ceil(Math.abs(a-o)/s)*d; e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')' } }, size:function(e,w,h,s){ e=typeof e=='object'?e:T$(e); clearInterval(e.si); var ow=e.offsetWidth, oh=e.offsetHeight, wo=ow-parseInt(e.style.width), ho=oh-parseInt(e.style.height); var wd=ow-wo>w?-1:1, hd=(oh-ho>h)?-1:1; e.si=setInterval(function(){TINY.box.twsize(e,w,wo,wd,h,ho,hd,s)},20) }, twsize:function(e,w,wo,wd,h,ho,hd,s){ var ow=e.offsetWidth-wo, oh=e.offsetHeight-ho; if(ow==w&&oh==h){ clearInterval(e.si); p.style.backgroundImage='none'; b.style.display='block' }else{ if(ow!=w){e.style.width=ow+(Math.ceil(Math.abs(w-ow)/s)*wd)+'px'} if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'} this.pos() } } } }(); TINY.page=function(){ return{ top:function(){return document.body.scrollTop||document.documentElement.scrollTop}, width:function(){return self.innerWidth||document.documentElement.clientWidth}, height:function(){return self.innerHeight||document.documentElement.clientHeight}, theight:function(){ var d=document, b=d.body, e=d.documentElement; return Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)) }, twidth:function(){ var d=document, b=d.body, e=d.documentElement; return Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth)) } } }();

 css

@charset "utf-8"; /* CSS Document */ body{padding:0; margin:0; font-size:84%; background:#eeeeee; color:#333333; font-family:'宋体',Verdana, Geneva, sans-serif;} ul,li,form,h1,h2,h3,h4,h5,h6,p{padding:0; margin:0; list-style-type:none;} i,cite{font-style:normal;} a{color:#34538b; text-decoration:underline;}a:hover{color:#F30; text-decoration:underline;} .l{float:left;}.r{float:right;}.cl{clear:both;}img{border:0; max-width:100%;} .tc{text-align:center;}.tr{text-align:right;} .vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;} .ml2{margin-left:2px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml20{margin-left:20px;}.mr2{margin-right:2px;}.mr5{margin-right:5px;},mr10{margin-right:10px;}.mr20{margin-right:20px;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mb2{margin-bottom:2px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;} .f9{font-size:0.9em;}.f10{font-size:1em;}.f11{font-size:1.1em;}f12{font-size:1.2em;}f13{font-size:1.3em;}f14{font-size:1.4em;}f15{font-size:1.5em;}f16{font-size:1.6em;} .fix{zoom:1;}.fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;} .rel{position:relative;}.abs{position:absolute;} .zxx_out_box{width:70%; min-width:700px; border-left:1px solid white; border-right:1px solid white; margin:0 auto;} .zxx_in_box{min-height:550px; _height:550px; border-left:1px solid #cccccc; border-right:1px solid #cccccc; background:white; padding:1em 2.5em 0;} .zxx_header{padding:10px 20px 5px; border-bottom:1px solid #cccccc; overflow:hidden; zoom:1;} .zxx_author_time{float:right; margin-top:34px; color:#787878; font-family:"Courier New", Courier, monospace;} .zxx_title{font-size:1.6em; text-align:center; margin:20px 0;} .zxx_main_con{padding:0 20px 20px;} .zxx_footer{padding-bottom:25px; text-align:center;} .zxx_test_list{padding:1em; font-size:1.1em; border-bottom:1px dashed #cccccc; line-height:1.4; overflow:hidden; zoom:1;} .zxx_code{display:block; padding:10px; margin:5px 0; background:#eeeeee; border:1px dashed #cccccc; clear:both; zoom:1;} .zxx_code xmp{margin:0; color:#00F; font-size:12px; white-space:pre-wrap; word-wrap:break-word;} .zxx_btn{display:inline-block; background:url(../image/down_btn.png) no-repeat; padding-left:25px;} .zxx_btn span{display:inline-block; height:45px; line-height:45px; background:url(../image/down_btn.png) no-repeat right top; padding:0 45px 0 20px; cursor:pointer;} .zxx_btn:hover{text-decoration:none; color:#34538b;}

html

<!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>jQuery实现的很炫很酷的弹出层效果</title> <link rel="stylesheet" href="css/common.css" mce_href="css/common.css" type="text/css" /> <mce:style type="text/css"><!-- .zxx_list_title{background:#eeeeee; border:1px solid #cccccc; padding:1em;} .zxx_list_content{padding:1em;} #tinybox{position:absolute; display:none; padding:10px; background:#ffffff url(image/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000;} #tinymask{position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000000; z-index:1500;} #tinycontent{background:#ffffff; font-size:1.1em;} --></mce:style><style type="text/css" mce_bogus="1">.zxx_list_title{background:#eeeeee; border:1px solid #cccccc; padding:1em;} .zxx_list_content{padding:1em;} #tinybox{position:absolute; display:none; padding:10px; background:#ffffff url(image/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000;} #tinymask{position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000000; z-index:1500;} #tinycontent{background:#ffffff; font-size:1.1em;}</style> <mce:script type="text/javascript" src="js/tinybox.js" mce_src="js/tinybox.js"></mce:script> </head> <body> <div class="zxx_out_box"> <div class="zxx_in_box"> <h3 class="zxx_title">jQuery实现很炫很酷的弹出层效果</h3> <div class="tr mb10"><a href="http://www.zhangxinxu.com/study/down/cool-pop-up-js.zip" mce_href="http://www.zhangxinxu.com/study/down/cool-pop-up-js.zip" class="zxx_btn"><span>实例下载.zip 12.5K</span></a></div> <div class="zxx_main_con"> <div class="zxx_list_title"><b>加载一个静态页面</b><a class="ml20" href="#zhangxinxu" mce_href="#zhangxinxu" id="click_test1">效果预览</a></div> <div class="zxx_list_content">加载一个静态页面，这里可能无法测试出来，在服务器项目里可以看见效果</div> <div class="zxx_list_title"><b>图片</b><a class="ml20" href="#zhangxinxu" mce_href="#zhangxinxu" id="click_test2">效果预览</a></div> <div class="zxx_list_content">用酷酷的浮动层显示图片</div> <div class="zxx_list_title"><b>显示flash</b><a class="ml20" href="#zhangxinxu" mce_href="#zhangxinxu" id="click_test3">效果预览</a></div> <div class="zxx_list_content">用酷酷的浮动层显示flash</div> <div class="zxx_list_title"><b>自动隐藏</b><a class="ml20" href="#zhangxinxu" mce_href="#zhangxinxu" id="click_test4">效果预览</a></div> <div class="zxx_list_content">层显示一段时间后自动隐藏，当作操作提示用是个很不错的选择</div> </div> <div class="zxx_footer"> <div style="width:550px;margin:20px auto;"> <p><strong><a href="http://js.niutuku.com" mce_href="http://js.niutuku.com" target="_blank">牛图库整理</a></strong> </p> <p></p> <p>转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> </div> </div> </div> </div> <mce:script type="text/javascript"><!-- T$('click_test1').onclick = function(){TINY.box.show('blank-for-test.html',1,300,150,1)} var content2 = "<img width='640' height='466' src="http://image.zhangxinxu.com/image/study/s/mm10.jpg" mce_src="http://image.zhangxinxu.com/image/study/s/mm10.jpg" />"; T$('click_test2').onclick = function(){TINY.box.show(content2,0,0,0,1)} var content3 = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='550' height='400'><param name='movie' value='flash/as3_clock_2.swf' /><param name='quality' value='high' /><param name='wmode' value='opaque' /><embed height='400' width='550' src="flash/as3_clock_2.swf" mce_src="flash/as3_clock_2.swf" type='application/x-shockwave-flash'></embed></object>"; T$('click_test3').onclick = function(){TINY.box.show(content3,0,0,0,1)} var content4 = "该浮动层将在3秒钟内消失。"; T$('click_test4').onclick = function(){TINY.box.show(content4,0,0,0,0,3)} // --></mce:script> </body> </html>