展示层的特效

<!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-CN" lang="zh-CN">
    <head>
    <title>Sample</title>
    <style>
    .icon a{ float:left;margin:5px;display:block;width:60px;height:60px;padding:15px; }
    .icon a:hover{ border:1px solid #ccf;background-color:#f0f0ff;padding:14px; }
    .icon a img{ height:60px;width:60px;border:0; }
    .win{
     display:none;border:1px solid #f99;overflow:hidden;position:absolute;
     background-color:#ddd;text-align:center; }
    .win h5{ margin:0 0 10px;text-align:right;padding:3px;background-color:#ccf; }
    .win h5 span{ cursor:pointer; }
    </style>
    <script type="text/javascript">
    var delay=250,step=10; /* delay为特效时长,单位.001秒 step为特效步长 */
    var ds=Math.floor(delay/step),dl,dw,dt,dh,setw,seth,op,dop=0.8/step,l,t,w,h;
    function show(ico,id){
     var objs=document.getElementById(id).style;
     op=0;
     getPos(ico);
     dl=(l-10-document.documentElement.scrollLeft)/step;
     dt=(t-10-document.documentElement.scrollTop)/step;
     if(setw>seth){
     w=90;
     h=90*seth/setw;
     } else {
     h=90;
     w=90*setw/seth;
     }
     dw=(setw-w)/step;
     dh=(seth-h)/step;
     objs.left='0px'; objs.top='0px';
     objs.height='0px'; objs.width='0px';
     objs.filter='alpha(opacity=0)';
     objs.opacity=0;
     objs.display='block';
     setTimeout('dis("'+id+'")',ds);
    }
    function dis(id){
     var objs=document.getElementById(id).style;
     op+=dop;
     if(op>=0.8){
     objs.left=document.documentElement.scrollLeft+10+'px';
     objs.top=document.documentElement.scrollTop+10+'px';
     objs.height=seth+'px';objs.width=setw+'px';
     objs.filter='alpha(opacity=100)';
     objs.opacity=1;
     } else {
     objs.left=Math.floor(l-=dl)+'px';
     objs.top=Math.floor(t-=dt)+'px';
     objs.height=Math.floor(h+=dh)+'px';
     objs.width=Math.floor(w+=dw)+'px';
     objs.filter='alpha(opacity='+(100*op)+')';
     objs.opacity=op;
     setTimeout('dis("'+id+'")',ds);
     }
    }
    function getPos(obj){
     l=obj.offsetLeft;
     t=obj.offsetTop;
     while(obj=obj.offsetParent){
     l+=obj.offsetLeft;
     t+=obj.offsetTop;
     }
    /*
     if(!(tmp=document.getElementById('pos'))){
     tmp=document.createElement('div');
     tmp.id='pos';
     tmp=document.body.appendChild(tmp);
     tmp.style.width='0';
     tmp.style.height='0';
     tmp.style.position='absolute';
     tmp.style.overflow='hidden';
     tmp.style.right='1px';
     tmp.style.bottom='1px';
     }
    */
     setw=document.documentElement.clientWidth-20;
     seth=document.documentElement.clientHeight-20;
    }
    </script>
    </head>
    <body>
    <div class="icon" style="height:auto;width:300px;position:absolute;left:250px;top:100px;">
    <a href="#" title="双击我"><img src="images/linklogo.gif" ondblclick="show(this,'div1')" onclick="return false" /></a>
    <a href="#" title="双击我"><img src="images/linklogo.gif" ondblclick="show(this,'div2')" onclick="return false" /></a>
    </div>
    <div id="div1" class="win">
    <h5>关闭</h5>
    <iframe frameborder="0" width="90%" height="90%" src="http://www.blueidea.com/"></iframe>
    </div>
     
    <div id="div2" class="win">
    <h5>关闭</h5>
    <div style="width:900px;margin:0 auto;">
    过秦论 
     
    秦孝公据崤函之固，拥雍州之地，君臣固守以窥周室，有席卷天下、包举宇内、囊括四海之意，并吞八荒之心。当是时也，商君佐之，内立法
    度，务耕织，修守战之具；外连衡而斗诸侯。于是秦人拱手而取西河之外。 
     
    孝公既没，惠文、武、昭襄蒙故业,因遗策，南取汉中，西举巴蜀，东割膏腴之地，北收要害之郡。诸侯恐惧，会盟而谋弱秦，不爱珍器重宝肥
    饶之地，以致天下之士，合从缔交，相举为一。当此之时，齐有孟尝，赵有平原，楚有春申，魏有信陵。此四君者，皆明智而忠信，宽厚而爱
    人，尊贤而重士，约从离衡，兼韩、魏、燕、赵、宋、卫、中山之众。于是六国之士，有宁越、徐尚、苏秦、杜赫之属为之谋，齐明、周最、
    陈轸、召滑、楼缓、翟景、苏厉、乐毅之徒通其意，吴起、孙膑、带佗、倪良、王廖、田忌、廉颇、赵奢之伦制其兵。尝以十倍之地，百万之
    师，仰关而攻秦。秦人开关延敌，九国之师逡巡而不敢进。秦无亡矢遗镞之费，而天下已困矣。于是从散约败，争割地以赂秦。秦有余力而制
    其弊，追亡逐北，伏尸百万，流血漂橹。因利乘便，宰割天下，分裂河山。强国请服，弱国入朝。延及孝文王、庄襄王，享国之日浅，国家无
    事。 
     
    及至始皇，奋六世之余烈，振长策而御宇内，吞二周而亡诸侯，履至尊而制六合，执敲扑而鞭笞天下，威震四海。南取百越之地，以为桂林、
    象郡；百越之君，俯首系颈，委命下吏。乃使蒙恬北筑长城而守藩篱，却匈奴七百余里。胡人不敢南下而牧马，士不敢弯弓而报怨。于是废先
    王之道，焚百家之言，以愚黔首；隳名城，杀豪杰，收天下之兵,聚之咸阳，销锋镝，铸以为金人十二，以弱天下之民。然后践华为城，因河为
    池，据亿丈之城，临不测之渊，以为固。良将劲弩守要害之处，信臣精卒陈利兵而谁何。天下已定，始皇之心，自以为关中之固，金城千里，
    子孙帝王万世之业也。 
    &nbsp; &nbsp; 
    始皇既没，余威震于殊俗。 然陈涉，瓮牖绳枢之子，氓隶之人，而迁徙之徒也；才能不及中人，非有仲尼、墨翟之贤，陶朱、猗顿之富；蹑足
    行伍之间，而倔起阡陌之中，率疲弊之卒，将数百之众，转而攻秦，斩木为兵，揭竿为旗，天下云集响应，赢粮而景从。山东豪俊遂并起而亡
    秦族矣。 
     
    且夫天下非小弱也，雍州之地，崤函之固，自若也。陈涉之位，非尊于齐、楚、燕、赵、韩、魏、宋、卫、中山之君也；锄耰棘矜，非铦于钩
    戟长铩也；谪戍之众，非抗于九国之师也；深谋远虑，行军用兵之道，非及向时之士也。然而成败异变，功业相反也。试使山东之国与陈涉度
    长絜大，比权量力，则不可同年而语矣。然秦以区区之地，致万乘之势，序八州而朝同列，百有余年矣；然后以六合为家，崤函为宫；一夫作
    难而七庙隳，身死人手，为天下笑者，何也？仁义不施而攻守之势异也！ 
    </div>
    </div>
    <div>
    新婚别 
    兔丝附蓬麻，引蔓故不长。 
    嫁女与征夫，不如弃路旁。 
    结发为君妻，席不暖君床。 
    暮婚晨告别，无乃太匆忙。 
    君行虽不远，守边赴河阳。 
    妾身未分明，何以拜姑嫜？ 
    父母养我时，日夜令我藏。 
    生女有所归，鸡狗亦得将。 
    君今往死地，沈痛迫中肠。 
    誓欲随君去，形势反苍黄。 
    勿为新婚念，努力事戎行。 
    妇人在军中，兵气恐不扬。 
    自嗟贫家女，久致罗襦裳。 
    罗襦不复施，对君洗红妆。 
    仰视百鸟飞，大小必双翔。 
    人事多错迕，与君永相望。 
     垂老别 
    四郊未宁静，垂老不得安。 
    子孙阵亡尽，焉用身独完？ 
    投杖出门去，同行为辛酸。 
    幸有牙齿存，所悲骨髓乾。 
    男儿既介胄，长揖别上官。 
    老妻卧路啼，岁暮衣裳单。 
    孰知是死别？且复伤其寒。 
    此去必不归，还闻劝加餐。 
    土门壁甚坚，杏园度亦难。 
    势异邺城下，纵死时犹宽。 
    人生有离合，岂择衰盛端。 
    忆昔少壮日，迟回竟长叹。 
    万国尽征戍，烽火被冈峦。 
    积尸草木腥，流血川原丹。 
    何乡为乐土？安敢尚盘桓？ 
    弃绝蓬室居，塌然摧肺肝。 
     无家别 
    寂寞天宝后，园庐但蒿藜。 
    我里百馀家，世乱各东西。 
    存者无消息，死者为尘泥。 
    贱子因阵败，归来寻旧蹊。 
    久行见空巷，日瘦气惨凄。 
    但对狐与狸，竖毛怒我啼。 
    四邻何所有？一二老寡妻。 
    宿鸟恋本枝，安辞且穷栖。 
    方春独荷锄，日暮还灌畦。 
    县吏知我至，召令习鼓鼙。 
    虽从本州役，内顾无所携。 
    近行只一身，远去终转迷。 
    家乡既荡尽，远近理亦齐。 
    永痛长病母，五年委沟溪。 
    生我不得力，终身两酸嘶。 
    人生无家别，何以为蒸黎？
    </div>
    </body>
    </html>

双击改单击的方法：<a href="#" title="双击我"><img src="images/linklogo.gif" ondblclick="show(this,'div1')" onclick="return false" /></a>

改成

精品网站程序下载(草根站长最爱)
QQ2013,QQ2012临时会话插件(全国首发)
711旅游网站管理系统V2013（无功能限制）
711幻灯片管理系统（全国首发）各类网站程序下载
711企业网站管理系统V2013个人版（无功能限制）
711免费在线客服系统个人版 V2.0
电影小偷采集程序V2013免费下载点此查看

更多的展示层的特效请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：互联网日期：2008-5-3