逐渐放大的图层菜单效果

稿源：互联网 2022-04-28 00:39:43 点击： 713 撤稿纠错

逐渐放大的图层菜单，超酷，完全支持自定义。

以下讨论的是和菜单特效相关的逐渐放大的图层菜单效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

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

关于逐渐放大的图层菜单效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200809011236.shtml方便下次再访问哦。

·上一篇： 模仿Lightbox提示框示例
·下一篇： 图文上下折叠滑动效果

逐渐放大的图层菜单效果

文章分类LIST >>返回首页

最新游戏

最新新闻