CSS+JS打造的一款flash效果的弹性菜单

浏览数：46 / 时间：2015年06月09日 
<!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>
    <title>CSS+JS打造的一款flash效果的弹性菜单丨</title>
    <style>
    *{ margin:0px; padding:0px;}
    body { background:#fff;}
    .naver{list-style-type: none; width:700px; overflow:hidden; margin:100px auto 0;}
    .naver li{ width:100px; height:50px; overflow:hidden; float:left; font-size:16px; text-align:center; cursor: pointer; }
    .naver li a,.naver li a:hover{display: block;width:100px; height:50px; line-height: 50px; color:#FFF; text-decoration: none; }
    .co1{ background:#649e37}
    .co2{ background:#028fbc}
    </style>
    <script type="text/javascript">
    window.onload=function()
    {
    var oUl=document.getElementById("nav");
    var aLi=oUl.getElementsByTagName("li");
    var i=0;
    for(i=0;i<aLi.length;i++)
    {
    aLi[i].timer=null;
    aLi[i].speed=0;
    aLi[i].onmouseover=function()
    {
    startMove(this,150);
    };
    aLi[i].onmouseout=function()
    {
    startMove2(this,50);
    };
    }
    };
    function startMove(obj,iTarget)
    {
    if(obj.timer)
    {
    clearInterval(obj.timer);
    }
    obj.timer=setInterval(function(){
    doMove(obj,iTarget);
    },30)
    };
    function doMove(obj,iTarget)
    {
    obj.speed+=3;
    if(Math.abs(iTarget-obj.offsetHeight)<1 && Math.abs(obj.speed)<1)
    {
    clearInterval(obj.timer);
    obj.timer=null;
    }
    else
    {
    if(obj.offsetHeight+obj.speed>=iTarget)
    {
    obj.speed*=-0.7;
    obj.style.height=iTarget+"px";
    }
    else
    {
    obj.style.height=obj.offsetHeight+obj.speed+"px";
    }
    }
    };
    function startMove2(obj,iTarget)
    {
    if(obj.timer)
    {
    clearInterval(obj.timer);
    }
    obj.timer=setInterval(function(){
    doMove2(obj,iTarget);
    },30)
    };
    function doMove2(obj,iTarget)
    {
    obj.speed-=3;
    if(Math.abs(iTarget-obj.offsetHeight)<1 && Math.abs(obj.speed)<1)
    {
    clearInterval(obj.timer);
    obj.timer=null;
    }
    else
    {
    if(obj.offsetHeight+obj.speed<=iTarget)
    {
    obj.speed*=-0.7;
    obj.style.height=iTarget+"px";
    }
    else
    {
    obj.style.height=obj.offsetHeight+obj.speed+"px";
    }
    }
    };
    </script>
    </head>
    <body>
    <ul id="nav" class="naver">
    <li class="co1"><a href="#">首页</a></li>
    <li class="co2"><a href="#">简历</a></li>
    <li class="co1"><a href="#">作品</a></li>
    <li class="co2"><a href="http://www.hbjbz.net/">河北京梆子锅炉</a></li>
    <li class="co1"><a href="#">河北金邦子锅炉</a></li>
    </ul>
    </body>
    </html>
    <div style="height:200px;"></div><br><br><hr>

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log java html http si it la class style log java html http si it la

相关文章

随机文章

您可能还喜欢

您可能还喜欢