 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 一个展示层的特效(双击图看效果) |
| 来源：轩魂国度 更新时间：2009/5/12 18:00:18 阅读次数： 我要投稿 |
|
<!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>一个展示层的特效(双击图看效果)</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="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582661.jpg" ondblclick="show(this,'div1')" onclick="return false" /></a>
<a href="#" title="双击我"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582661.jpg" ondblclick="show(this,'div2')" onclick="return false" /></a>
</div>
<div id="div1" class="win">
<h5><span onclick="this.parentNode.parentNode.style.display='none'">关闭</span></h5>
<iframe frameborder="0" width="90%" height="90%" src="http://www.cwydesign.com/"></iframe>
</div>
<br />
<div id="div2" class="win">
<h5><span onclick="this.parentNode.parentNode.style.display='none'">关闭</span></h5>
<div style="width:900px;margin:0 auto;">
过秦论<br />
<br />
秦孝公据崤函之固，拥雍州之地，君臣固守以窥周室，有席卷天下、包举宇内、囊括四海之意，并吞八荒之心。当是时也，商君佐之，内立法
度，务耕织，修守战之具；外连衡而斗诸侯。于是秦人拱手而取西河之外。 <br />
<br />
孝公既没，惠文、武、昭襄蒙故业,因遗策，南取汉中，西举巴蜀，东割膏腴之地，北收要害之郡。诸侯恐惧，会盟而谋弱秦，不爱珍器重宝肥
饶之地，以致天下之士，合从缔交，相举为一。当此之时，齐有孟尝，赵有平原，楚有春申，魏有信陵。此四君者，皆明智而忠信，宽厚而爱
人，尊贤而重士，约从离衡，兼韩、魏、燕、赵、宋、卫、中山之众。于是六国之士，有宁越、徐尚、苏秦、杜赫之属为之谋，齐明、周最、
陈轸、召滑、楼缓、翟景、苏厉、乐毅之徒通其意，吴起、孙膑、带佗、倪良、王廖、田忌、廉颇、赵奢之伦制其兵。尝以十倍之地，百万之
师，仰关而攻秦。秦人开关延敌，九国之师逡巡而不敢进。秦无亡矢遗镞之费，而天下已困矣。于是从散约败，争割地以赂秦。秦有余力而制
其弊，追亡逐北，伏尸百万，流血漂橹。因利乘便，宰割天下，分裂河山。强国请服，弱国入朝。延及孝文王、庄襄王，享国之日浅，国家无
事。 <br />
<br />
及至始皇，奋六世之余烈，振长策而御宇内，吞二周而亡诸侯，履至尊而制六合，执敲扑而鞭笞天下，威震四海。南取百越之地，以为桂林、
象郡；百越之君，俯首系颈，委命下吏。乃使蒙恬北筑长城而守藩篱，却匈奴七百余里。胡人不敢南下而牧马，士不敢弯弓而报怨。于是废先
王之道，焚百家之言，以愚黔首；隳名城，杀豪杰，收天下之兵,聚之咸阳，销锋镝，铸以为金人十二，以弱天下之民。然后践华为城，因河为
池，据亿丈之城，临不测之渊，以为固。良将劲弩守要害之处，信臣精卒陈利兵而谁何。天下已定，始皇之心，自以为关中之固，金城千里，
子孙帝王万世之业也。<br />
<br />
始皇既没，余威震于殊俗。 然陈涉，瓮牖绳枢之子，氓隶之人，而迁徙之徒也；才能不及中人，非有仲尼、墨翟之贤，陶朱、猗顿之富；蹑足
行伍之间，而倔起阡陌之中，率疲弊之卒，将数百之众，转而攻秦，斩木为兵，揭竿为旗，天下云集响应，赢粮而景从。山东豪俊遂并起而亡
秦族矣。<br />
<br />
且夫天下非小弱也，雍州之地，崤函之固，自若也。陈涉之位，非尊于齐、楚、燕、赵、韩、魏、宋、卫、中山之君也；锄耰棘矜，非铦于钩
戟长铩也；谪戍之众，非抗于九国之师也；深谋远虑，行军用兵之道，非及向时之士也。然而成败异变，功业相反也。试使山东之国与陈涉度
长絜大，比权量力，则不可同年而语矣。然秦以区区之地，致万乘之势，序八州而朝同列，百有余年矣；然后以六合为家，崤函为宫；一夫作
难而七庙隳，身死人手，为天下笑者，何也？仁义不施而攻守之势异也！
</div>
</div>
</body>
</html> |
|
| 上一篇文章： 没有了下一篇文章： 非常简单的网页加载LOADING效果 |
|
|
|
注册 登录
