JS下拉缓冲菜单代码

来源：互联网发布：手机安易数据恢复软件编辑：程序博客网时间：2024/05/26 19:14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body,html,div,ul,li,span,img,a{
   margin:0;
   padding:0;
}
a{
   text-decoration:none;
   color:#000;
   font-weight:bold;
   width:150px;
   display:inline-block;
   text-align:center;
}
li{
   list-style:none;
}
img{
   width:0;
   height:0;
   outline:none;
}
#tab{
   margin:200px 0 0 300px;
}
#tab li{
   float:left;
   width:150px;
   height:50px;
   line-height:50px;
   position:relative;
   margin-right:30px;
}
#tab img.map,#tab span.content{
   position:absolute;
}
#tab span.content{
   background:#333;
   color:#FFF;
   font-size:14px;
   text-align:center;
   height:0;
}
#tab img.map{
   left:50%;
   bottom:0;
}
</style>
<title>JS下拉缓冲菜单_网页代码站()</title>
</head>

<body>
<div id="tab">
<ul>
    <li style="background:url('/images/20130826/psb1.png')">
      <a href="#">路飞</a>
      <img src="/jscss/demoimg/201210/psb1.jpg" class="map" />
      <span class="content">草帽海贼团船长，特征是头戴草帽，天性乐观、热情、善良、天真、单纯。</span>
    </li>
    <li style="background:url('/images/20130826/psb1.png')">
      <a href="#">索隆</a>
     <img src="/images/20130826/psb2.jpg" class="map" />
      <span class="content">草帽海贼团剑士，绿色头发，左耳戴三只黄色露珠耳环，绿色的肚兜,路痴。</span>
    </li>
    <li style="background:url('/images/20130826/psb1.png')">
      <a href="#">娜美</a>
      <img src="/jscss/demoimg/201210/psb3.jpg" class="map" />
      <span class="content">精通气象学和航海术，擅长偷术、骗术、谈判及威胁恐吓，头脑聪明又机灵。</span>
    </li>
    <li style="background:url('/images/20130826/psb1.png')">
      <a href="#">山治</a>
      <img src="/images/20130826/psb4.jpg" class="map" />
      <span class="content">草帽海贼团厨师，金发，有着卷曲眉毛，永远遮住半边脸的家伙，海贼中的绅士。</span>
    </li>
</ul>
</div>
<script type="text/javascript">
function kzxf_zoom(id)
{
   this.initialize.apply(this, arguments)
}

kzxf_zoom.prototype =
{
   initialize : function()

   {

       var _this = this;
       this.wrapBox = document.getElementById('tab');
       this.oLi = this.wrapBox.getElementsByTagName('li');
       this.aImg = this.wrapBox.getElementsByTagName('img');
       this.content = this.wrapBox.getElementsByTagName('span');
       for(var i=0;i<this.oLi.length;i++)
       {
           (function(i){
               _this.oLi[i].onmouseover = function()

               {
                   _this.jump(_this.aImg[i], _this.content[i]);

               };
               _this.oLi[i].onmouseout = function()

               {
                   _this.hidden(_this.aImg[i], _this.content[i]);

               };

           })(i)

       }

   },
   jump : function(obj1, obj2)

   {

       var _this = this;
       _this.animation(obj1, {height:130, width:160, marginLeft:-78, marginTop:-128},function(){
           _this.animation(obj1, {height:115, width:140, marginLeft:-70, marginTop:-115}, function(){
           _this.animation(obj1, {height:120, width:150, marginLeft:-75, marginTop:-120})
           })
       });
       _this.animation(obj2, {height:200});
   },
   hidden : function(obj1, obj2)
   {
       var _this = this;
       _this.animation(obj1, {width:0, height:0, marginLeft:0, marginTop:0});
       _this.animation(obj2, {height:0});
   },
   animation : function(obj, oAttr, fnCallBack)
   {
       var _this = this;
       clearInterval(obj.timer);
       obj.timer = setInterval(function()
       {
       var bStop = true;
       for(proper in oAttr)
            {

               var iCur = parseFloat(_this.css(obj, proper));

               proper == 'opacity' && (iCur = parseInt(iCur.toFixed(2) * 100));

               var iSpeed = (oAttr[proper] - iCur) / 5;

               iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                if(iCur != oAttr[proper])

               {

                  bStop = false;

                  _this.css(obj, proper, iCur + iSpeed);

               }

           }

           if(bStop)

           {

               clearInterval(obj.timer);

               fnCallBack && fnCallBack.apply(_this, arguments);

           }

       },20);

   },

   css : function(obj, attr, value)

   {

       if(arguments.length == 2)

       {

           return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]

       }

       if(arguments.length == 3)

       {

           switch(attr)

           {

               case 'width' :

               case 'height' :

               case 'top' :

               case 'bottom' :

               case 'left' :

                case 'marginLeft':

                case 'marginTop':

               obj.style[attr] = value + 'px';

               break;

               case 'opacity' :

               obj.style.filter = 'alpha(opacity = '+value+' )';

               obj.style.opacity = value / 100;

               break;

               default :

               obj.style[attr] = value;

               break;

           }

       }

   }

};
window.onload = function()
{
   new kzxf_zoom('tab')

};

</script>
<br />
http://user.qzone.qq.com/1198772766
</body>
</html>