[酷]逐渐放大的图层菜单效果

以下是HTML网页特效代码，点击运行按钮可查看效果：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>首页</title> <LINK href="http://www.china-pub.com/edition07/newhead.css" type=text/css rel=stylesheet> </head> <body> <DIV id=shoe_box style="POSITION: absolute;padding:0px;PADDING-top: 30px; WIDTH: 30px; height:30px; z-index: 100; DISPLAY:none"><div style="BORDER: 1px solid #666; padding:0px; width: 100%; height: 100%; z-index: 200; " id="show_box_con"></div></div> <script> var h_max=220, w_max=500 ,otep=4; var obj,obj_l,obj_t,obj_w,obj_h,x,y,show_obj; var str='<iframe src="http://www.alixixi.com" width="100%" height="100%" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>' var sh=0 function show_div(o_img,id){ obj=get_object(id); obj_l=416; obj_t=39; obj_w=141; obj_h=23; x=obj_l+obj_w/2; y=obj_t-5; show_obj=get_object("shoe_box") show_obj.style.display="block" show_obj.style.left=x show_obj.style.top=y shou_div_do() } var n=0,obj_l_new,obj_t_new,obj_w_new,obj_h_new; var timer1,timer function shou_div_do(){ sh=1 if (n>=otep){ clearTimeout(timer1); sh=0; n=otep; show_obj.style.left=236; get_object("show_box_con").innerHTML=str; show_obj.style.height=236; show_obj.style.zIndex=1000; get_object("show_box_con").onmouseout=function(){hid_me()} } else { n++; show_obj.style.left=x-n*(w_max/otep)/2; show_obj.style.width=n*(w_max/otep); show_obj.style.height=n*(h_max/otep); timer1=setTimeout("shou_div_do()",30); } } function hid_me(){ if (sh==1)return; if (n<1){ clearTimeout(timer); n=1; show_obj.style.display="none"; } else { n--; get_object("show_box_con").innerHTML=""; show_obj.style.left=x-n*(w_max/otep)/2; show_obj.style.width=n*(w_max/otep); show_obj.style.height=n*(h_max/otep); timer=setTimeout("hid_me()",50); } } function get_object(obj) { var elem; if (typeof obj == "string") elem = document.getElementById(obj); else elem = obj; return elem; } </script> <DIV align=center> <TABLE height=60 cellSpacing=0 cellPadding=0 width=778 border=0> <TBODY> <TR> <TD vAlign=bottom width="27%" height=65></TD> <TD vAlign=bottom width="73%"> <DIV style="WIDTH: 550px" align=right></DIV> <TABLE height=26 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD vAlign=bottom align=right width=6> <IMG height=26 src="http://www.china-pub.com/edition06/title/title_03.gif" width=6></TD> <TD class=headermenu1 vAlign=bottom align=middle width=94> <A class=nhblue14 href="../images/china-pub.htm">首　页</A></TD> <TD vAlign=bottom align=left width=9> <IMG height=26 src="/uploads/allimg/150926/141U22493-1.gif" width=9></TD> <TD vAlign=bottom align=right width=5> <IMG height=26 src="/uploads/allimg/150926/141U2G30-2.gif" width=5></TD> <TD align=middle width=143 bgColor=#056bac>  <DIV align=center> <TABLE cellSpacing=0 cellPadding=0 width=141 border=0> <TBODY> <TR> <TD vAlign=top align=middle> <IMG id="imgs" height=23 src="/uploads/allimg/150926/141U22252-3.gif" width=141 name=two-tabs>  </TD></TR></TBODY></TABLE></DIV></TD> <TD vAlign=bottom align=left width=10> <IMG height=26 src="/uploads/allimg/150926/141U245c-4.gif" width=8></TD> <TD align=left width=453> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> <A href="../images/china-pub.htm"></A></DIV> <script> get_object("imgs").onmouseover=function(){show_div("imgs","all-categories")} </script> <DIV id=menu align=center> <TABLE height=70 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD vAlign=bottom> <TABLE cellSpacing=0 cellPadding=0 width="98%" align=center border=0> <TBODY> <TR> <TD align=middle><A class=nhblack13 href="http://www.china-pub.com/search/Browse_index.asp">分类</A>　|　<A class=nhblack13 href="http://www.china-pub.com/search/topsale.asp">排行</A>　|　<A class=nhblack13 href="http://www.china-pub.com/main/sale/bestsellers.asp">专题</A>　|　<A class=nhblack13 href="http://www.china-pub.com/sale/">特价店</A>　|　<A class=nhblack13 href="http://www.china-pub.com/computers/bbs/">论坛</A>　|　<A class=nhblack13 href="http://blog.china-pub.com/">Blog</A>　|　<A class=nhblack13 href="http://www.china-pub.com/common/DaoHangTu.asp">本站导航</A> </TD></TR></TBODY></TABLE></TD></TR> <TR> <TD> <TABLE cellSpacing=0 cellPadding=0 width=777 align=center border=0> <TBODY> <TR> <TD width=128> <IMG height=18 src="/uploads/allimg/150926/141U26101-5.gif" width=19> <SPAN class=nhwhite13>商品查询：</SPAN></TD> <FORM id=wg001 name=wg001 action=http://www.china-pub.com/search/power_search/dir.asp method=post> <TD width=82><SELECT style="WIDTH: 70px" name=pz> <OPTION value=1 selected>图书</OPTION></SELECT> </TD> <TD width=301><INPUT class=editbox1 onclick="javascript:if (this.value=='key1 key2 key3'){this.value=''}" size=40 value="key1 key2 key3" name=key></TD> <TD width=69> <INPUT type=image src="/uploads/allimg/150926/141U25621-6.gif" align=middle border=0 name=image> <INPUT style="DISPLAY: none" value=1 name=kid> </TD></FORM> <TD width=92><SPAN style="PADDING-TOP: 7px"><A class=nhwhite12 href="http://www.china-pub.com/search/search_index.asp">组合查询</A></SPAN></TD> <TD align=left width=81><A href="http://www.china-pub.com/rss/index.asp" target=_blank> <IMG height=16 src="/uploads/allimg/150926/141U221P-7.gif" width=52 border=0></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV> </body> </html>
[提示：可先修改代码再按运行]

关键字词:

[酷]逐渐放大的图层菜单效果

相关文章

栏目导航

最新文章

点击排行

推荐文章

打赏