外贸建站之酷炫jquery模仿flash导航

外贸建站之酷炫jquery模仿flash导航，简单实用，好用。

JS代码，

<script>
$(document).ready(function(){
    $(".con").prepend(‘<div class="nav_ub"></div><div class="nav_db"></div>‘)
    $(".con").hover(function(){
        $(this).children(".nav_ub").stop().animate({top:-26},300);
        $(this).find(".pos").stop().animate({left:220},250);
        $(this).children(".nav_db").stop().animate({bottom:-14},300);
        $(this).find(".pos").stop().animate({left:220},250);
    },function(){
        $(this).children(".nav_ub").stop().animate({top:0},300);
        $(this).find(".pos").stop().animate({left:200},250);
        $(this).children(".nav_db").stop().animate({bottom:0},300);
        $(this).find(".pos").stop().animate({left:200},250);
    });
})
</script>

CSS代码：

<style>
*{ margin:0; padding:0;}
.con{ height:40px; width:100%; overflow:hidden; position:relative; background:#9fc;}
.nav_u{ height:26px; font:22px/26px "宋体"; font-style:italic; font-weight:bold; color:#333; position:relative;}
.nav_d{ height:14px; font:12px/12px "宋体"; color:#333; position:relative;}
.pos{position:relative; left:200px;}
.con a{ text-decoration:none; display:block; color:#666}
.nav_ub{ width:100%; height:26px; position:absolute; top:0px;  background:#fff;}
.nav_db{ width:100%; height:14px; position:absolute; bottom:0px; background:#fff;}
</style>

以上代码，我们在 CNC FOAM CUTTING MACHINE 网站上测试过，效果非常好，欢迎大家试用。

原文地址：https://www.cnblogs.com/cannovo/p/11350460.html