您的位置：首页 > Web前端 > JavaScript

JS下拉缓冲菜单代码

2013-08-29 23:18 260 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航