一款动感十足的div+css动态菜单 - 网页教程 - 泉州网站建设-自助建站-外贸网站建设
当前位置:HOME > 网页教程 > 综合特效
一款动感十足的div+css动态菜单
来源:泉州网站建设 作者:轩奇网讯 发布时间 2008-11-14 转载请注明来自泉州网络公司

以下是代码片段:

<html>
<head>
<style type="text/css">
 body {cursor:hand; margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%;}
 .link
 .title   {position:relative;cursor:pointer;background:#FF6600;width:100%;color:#fff;font-family:trebuchet MS;verdana;font-size:11px;left:2;height:15;overflow:hidden;}
 .title_o {position:relative;cursor:pointer;background:#fff;width:100%;color:#000;font-family:trebuchet MS;verdana;font-size:11px;left:2;height:15;overflow:hidden;}
 .text {position:relative;text-align:justify;margin:10px;font-family:trebuchet MS;verdana;font-size:11px;color:#FFF;overflow:hidden;height:90%}
.fernando {  font-family: "Trebuchet MS", Geneva, Arial, Helvetica, san-serif; font-size: 16px; font-weight: bolder}
.mafra {  }
</style>
<script type="text/javascript"><!--
var object = new Array();
function Slide(N,oCont){
 this.N  = N;
 this.S  = 1.1;
 this.object = new Array();
 this.CObj = function (parent,N){
  this.parent = parent;
  this.N = N;
  this.obj = parent.frm[N];
  this.tit = this.obj.firstChild;
  this.div = this.obj.getElementsByTagName("div")[1];
  this.div.style.visibility = "hidden";
  this.y0 = N * 18;
  this.Y1 = this.y0;
  this.obj.style.top = this.y0;
  this.obj.style.height = parent.H - (parent.NF-1) * 18 - 3;
  this.obj.style.visibility = "visible";
  this.obj.parent = this;
  this.run = false;
  this.move = function(){
   with(this){
    dy = (y1-y0)/parent.S;
    if(Math.abs(dy)>.1){
     y0+=dy;
     obj.style.top = Math.round(y0);
     setTimeout("object["+parent.N+"].object["+N+"].move();", 16);
    } else {
     run = false;
     if(dy>0)div.style.visibility="hidden";
     else if(N>0)parent.object[N-1].div.style.visibility="hidden";
    }
   }
  }
  this.obj.onmouseover = function(){
   with(this.parent){
    if(!run){
     run = true;
     div.style.visibility="visible";
     for(i=0;i<parent.NF;i++)parent.object[i].tit.className = "title";
     tit.className = "title_o";
     for(i=0;i<=N;i++){
      parent.object[i].y1 = i*18;
      parent.object[i].move();
     }
     for(i=N+1;i<parent.NF;i++){
      parent.object[i].y1 = parent.H-(parent.NF-i)*18;
      parent.object[i].move();
     }
    }
   }
  }
 }
 this.frm = document.getElementById(oCont);
 this.H = parseInt(this.frm.style.height);
 this.frm = this.frm.getElementsByTagName("span");
 this.NF = this.frm.length;
 for(i=0;i<this.NF;i++) this.object[i] = new this.CObj(this, i);
 this.object[0].obj.onmouseover();
 this.S = 10;
}
onload = function() {
 object[0] = new Slide(0, "frames");
}
//-->
</script>
</head>
<body bgcolor="#333333">
<div style="position:absolute;left:50%;top:50%">
  <div id="frames" style="position:absolute;width:200;height:340;left:-100;top:-180;overflow:hidden">
    <span class="link">
    <div class="title"></div>
    <div style="position:relative;text-align:center;margin:0px;font-family:trebuchet MS; verdana;font-size:29px;font-weight:bold;color:#FFF;overflow:hidden;height:120%">
      <a href="http://www.mafra.fot.br/photos/alimentos.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_logo_home.gif" width="191" height="189" border="0"></a>
    </div>
    </span> <span class="link">
    <div class="title"><b>  alimentos /<i> food</i></b></div>
    <div class="text"> <a href="http://www.mafra.fot.br/photos/alimentos.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-01.jpg" width="183" height="174" border="0"></a>
    </div>
    </span> <span class="link">
    <div class="title"><b>  bebidas /<i> drinks</i></b></div>
    <div class="text"> <a href="http://www.mafra.fot.br/photos/bebidas.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-02.jpg" width="183" height="174" border="0"></a>
    </div>
    </span> <span class="link">
    <div class="title"><b>  joias /<i> jewels</i></b></div>
    <div class="text"> <a href="http://www.mafra.fot.br/photos/joias.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-03.jpg" width="183" height="174" border="0"></a>
    </div>
    </span> <span class="link">
    <div class="title"><b>  natureza /<i> nature</i></b></div>
    <div class="text"> <a href="http://www.mafra.fot.br/photos/natureza.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-04.jpg" width="183" height="174" border="0"></a>
    </div>
    </span> <span class="link">
    <div class="title"><b>  gente /<i> people</i></b></div>
    <div class="text"> <a href="http://www.mafra.fot.br/photos/pessoas.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-05.jpg" width="183" height="174" border="0"></a>
    </div>
    </span> <span class="link">
    <div class="title"><b>  produtos /<i> products</i></b></div>
    <div class="text"> <a href="http://www.mafra.fot.br/photos/produtos.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-06.jpg" width="183" height="174" border="0"></a>
    </div>
    </span> <span class="link">
    <div class="title"><b>  contato /<i> contact</i></b></div>
    <div style="position:relative;text-align:center;margin:0px;font-family:verdana;font-size:32px;font-weight:bold;color:#FFF;overflow:hidden;height:90%">
      <a href="mailto:mafra@mafra.fot.br?Subject=Contato - Contact"><img src="http://www.mafra.fot.br/photos/images/img_assina_home.gif" width="191" height="189" border="0"></a>
    </div>
    </span></div>
</div>
<div style="position:relative; text-align:center; margin:0px; font-family:verdana; font-size:9px; font-weight:normal; color:#999999; overflow:hidden; height:131px; left: 414px; top: 474px; width: 172px;">
</div>
<script type="text/javascript">
_uacct = "UA-1182901-1";
urchinTracker();
</script>
</body>
</html>
<a href="http://xuanqi8.com/">欢迎访问轩奇自助建站-网页特效代码站</a>

[ 点击数:] [打印本网页] [关闭本窗口]
 

企业网站定制自助建站申请

相关内容
轩奇网讯网络科技有限公司!专业服务于泉州中小企业网站建设、网页设计、自助建站、平面设计、企业推广等服务,帮助企业组建良好的网络市场,树立良好的网上企业形象!轩奇网讯为企业、个人提供优质的网站建设、网页设计、自助建站、网络推广、商业网站策划和平面设计以及网站推广等全套企业上网电子商务全程服务。
公司服务热线:0595-22519051   业务QQ:875738395   业务QQ:691096865  业务QQ:1206025406    E-mai:admin@0595zx.net
地址:福建省泉州市桥南片区南天裕景3幢2梯2205 邮编:362000
总机:0595-22519051 传真:0595-22927208 业务咨询:13559621427 业务咨询:13328992520
业务QQ销售:875738395 业务QQ销售:1206025406 技术支持:691096865
友情连接交换PR >= 3 在线QQ:875738395.定期查询
2005-2010 泉州轩奇网络有限公司
闽ICP备:08001315号
国际联网备案编号:44030000129642
轩奇网讯