DIV+CSS+JS的菜单, 广告特效代码

来自: 分享 作者: 水煮鱼 时间: 2010-11-12 11:15 查看: 4179 回复: 0

今日偶然发现一段DIV+CSS+JS的特效代码, 用来做菜单, 做广告做图片展示均可! 很炫!

截图:
demo3.png

源代码:
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body {cursor:hand; margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%;}
  5. .link {position:absolute;left:0;width:100%;height:0;background:#000;overflow:hidden;visibility:hidden;}
  6. .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;}
  7. .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;}
  8. .text {position:relative;text-align:justify;margin:10px;font-family:trebuchet MS;verdana;font-size:11px;color:#FFF;overflow:hidden;height:90%}
  9. .fernando {  font-family: "Trebuchet MS", Geneva, Arial, Helvetica, san-serif; font-size: 16px; font-weight: bolder}
  10. .mafra {  }
  11. </style>
  12. <script type="text/javascript"><!--
  13. var object = new Array();
  14. function Slide(N,oCont){
  15. this.N  = N;
  16. this.S  = 1.1;
  17. this.object = new Array();
  18. this.CObj = function (parent,N){
  19.   this.parent = parent;
  20.   this.N = N;
  21.   this.obj = parent.frm[N];
  22.   this.tit = this.obj.firstChild;
  23.   this.div = this.obj.getElementsByTagName("div")[1];
  24.   this.div.style.visibility = "hidden";
  25.   this.y0 = N * 18;
  26.   this.Y1 = this.y0;
  27.   this.obj.style.top = this.y0;
  28.   this.obj.style.height = parent.H - (parent.NF-1) * 18 - 3;
  29.   this.obj.style.visibility = "visible";
  30.   this.obj.parent = this;
  31.   this.run = false;
  32.   this.move = function(){
  33.    with(this){
  34.     dy = (y1-y0)/parent.S;
  35.     if(Math.abs(dy)>.1){
  36.      y0+=dy;
  37.      obj.style.top = Math.round(y0);
  38.      setTimeout("object["+parent.N+"].object["+N+"].move();", 16);
  39.     } else {
  40.      run = false;
  41.      if(dy>0)div.style.visibility="hidden";
  42.      else if(N>0)parent.object[N-1].div.style.visibility="hidden";
  43.     }
  44.    }
  45.   }
  46.   this.obj.onmouseover = function(){
  47.    with(this.parent){
  48.     if(!run){
  49.      run = true;
  50.      div.style.visibility="visible";
  51.      for(i=0;i<parent.NF;i++)parent.object[i].tit.className = "title";
  52.      tit.className = "title_o";
  53.      for(i=0;i<=N;i++){
  54.       parent.object[i].y1 = i*18;
  55.       parent.object[i].move();
  56.      }
  57.      for(i=N+1;i<parent.NF;i++){
  58.       parent.object[i].y1 = parent.H-(parent.NF-i)*18;
  59.       parent.object[i].move();
  60.      }
  61.     }
  62.    }
  63.   }
  64. }
  65. this.frm = document.getElementById(oCont);
  66. this.H = parseInt(this.frm.style.height);
  67. this.frm = this.frm.getElementsByTagName("span");
  68. this.NF = this.frm.length;
  69. for(i=0;i<this.NF;i++) this.object[i] = new this.CObj(this, i);
  70. this.object[0].obj.onmouseover();
  71. this.S = 10;
  72. }
  73. onload = function() {
  74. object[0] = new Slide(0, "frames");
  75. }
  76. //-->
  77. </script>
  78. </head>
  79. <body bgcolor="#333333">
  80. <div style="position:absolute;left:50%;top:50%">
  81.   <div id="frames" style="position:absolute;width:200;height:340;left:-100;top:-180;overflow:hidden">
  82.     <span class="link">
  83.     <div class="title"></div>
  84.     <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%">
  85.       <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>
  86.     </div>
  87.     </span> <span class="link">
  88.     <div class="title"><b>  alimentos /<i> food</i></b></div>
  89.     <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>
  90.     </div>
  91.     </span> <span class="link">
  92.     <div class="title"><b>  bebidas /<i> drinks</i></b></div>
  93.     <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>
  94.     </div>
  95.     </span> <span class="link">
  96.     <div class="title"><b>  joias /<i> jewels</i></b></div>
  97.     <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>
  98.     </div>
  99.     </span> <span class="link">
  100.     <div class="title"><b>  natureza /<i> nature</i></b></div>
  101.     <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>
  102.     </div>
  103.     </span> <span class="link">
  104.     <div class="title"><b>  gente /<i> people</i></b></div>
  105.     <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>
  106.     </div>
  107.     </span> <span class="link">
  108.     <div class="title"><b>  produtos /<i> products</i></b></div>
  109.     <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>
  110.     </div>
  111.     </span> <span class="link">
  112.     <div class="title"><b>  contato /<i> contact</i></b></div>
  113.     <div style="position:relative;text-align:center;margin:0px;font-family:verdana;font-size:32px;font-weight:bold;color:#FFF;overflow:hidden;height:90%">
  114.       <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>
  115.     </div>
  116.     </span></div>
  117. </div>
  118. <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;">
  119. </div>
  120. <script type="text/javascript">
  121. _uacct = "UA-1182901-1";
  122. urchinTracker();
  123. </script>
  124. </body>
  125. </html>
复制代码
快速回复
您需要登录后才可以回帖 登录 | 注册
Smilies Code
高级模式