超炫的jquery仿flash导航栏特效

FLASH导航现在基本上已经是过时了,但是我们可以用jQuery来实现flash效果,非常的不错。

演示地址:

复制代码 代码如下:


<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>demo01</title> 
    <link type="text/css" href="https://www.jb51.net/demo.css"> 
    <script type="text/javascript" src="https://www.jb51.net/jquery.js"></script> 
    <script type="text/javascript" src="https://www.jb51.net/demo.js"></script> 
</head> 
<body> 
        <div> 
        <div> 
            <div></div> 
            <span>测试</span> 
        </div> 
        <div> 
            <div></div> 
            <span>测试</span> 
        </div> 
        <div> 
            <div></div> 
            <span>测试</span> 
        </div> 
        <div> 
            <div></div> 
            <span>测试</span> 
        </div> 
        <div> 
            <div></div> 
            <span>测试</span> 
        </div> 
        <div> 
            <div></div> 
            <span>测试</span> 
        </div> 
        </div> 
</body> 
</html> 


 

复制代码 代码如下:


$(document).ready(function(){ 
    $(".menu").mouseover(function(){ 
        var div = $(this).children(".menu_b"); 
        var span = $(this).children("span"); 
        //隐藏字体,往右移动20px 
        span.stop(true,false).animate({opacity:'0',left:'20px'},200); 
        //显示背景动画 
        div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300); 
        div.animate({height:'40px',marginTop:'-20px',opacity:'1'},300); 
        //显示字体,往左移动20px 
        span.animate({opacity:'1',left:'0px'},300); 
        span.css({color:'#FFF'}); 
    }); 
 
    $(".menu").mouseout(function(){ 
        var div = $(this).children(".menu_b"); 
        var span = $(this).children("span"); 
        //隐藏字体,往左移动20px 
        span.stop(true,false).animate({opacity:'0',left:'20px'},200); 
        //显示背景动画 
        div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300); 
        div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300); 
        //显示字体,往右移动20px 
        span.animate({opacity:'1',left:'0px'},300); 
        span.css({color:'#777'}); 
    }); 
}); 

动画效果是我根据自己的喜好来写的,喜欢的可以自己更改特效。。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgszxj.html