鼠标经过图层逐渐放大效果

稿源：互联网 2022-06-27 11:16:44 点击： 961 撤稿纠错

鼠标移动到导航链接时，弹出一个逐渐放大的框架。

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>鼠标经过图层逐渐放大效果，sky整理收集。</title>
<LINK href="http://www.china-pub.com/edition07/newhead.css" type=text/css rel=stylesheet>
</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<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.zzjs.net" 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()
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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()}
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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";
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
}
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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></TD>
          <TD vAlign=bottom align=left width=9></TD>
          <TD vAlign=bottom align=right 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>
    <div id="www_zzjs_net">鼠标经过这里</div> 
                  </TD></TR></TBODY></TABLE></DIV></TD>
          <TD vAlign=bottom align=left width=10></TD>
          <TD align=left width=453>
          </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<A href="../"></A></DIV>
<script>
get_object("www_zzjs_net").onmouseover=function(){show_div("www_zzjs_net","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.zzjs.net">分类</A>　|　<A
            class=nhblack13 href="http://www.zzjs.net">排行</A>　|　<A class=nhblack13 href="http://www.zzjs.net">专题</A>　|　<A class=nhblack13 href="http://www.zzjs.net">特价店</A>　|　<A class=nhblack13 href="http://www.zzjs.net">论坛</A>　|　<A class=nhblack13 href="http://www.zzjs.net">Blog</A>　|　<A class=nhblack13 href="http://www.zzjs.net">本站导航</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>
            <SPAN class=nhwhite13>商品查询：</SPAN></TD>
          <FORM id=wg001 name=wg001 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=='www.zzjs.net'){this.value=''}" size=40 value="www.zzjs.net" name=key></TD>
          <TD width=69>
   <INPUT type="button" value="搜索"> <INPUT style="DISPLAY: none" value=1 name=kid> </TD></FORM>
          <TD width=92><SPAN style="PADDING-TOP: 7px"><A class="nhwhite12" href="http://www.zzjs.net">组合查询</A></SPAN></TD>
          <TD align=left width=81></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>
</body>
</html>

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

·上一篇： 单击弹出下拉菜单
·下一篇： 向上竖弹的三级导航菜单

鼠标经过图层逐渐放大效果

文章分类LIST >>返回首页

最新游戏

最新新闻