超炫的jquery仿flash导航栏特效

2019-07-25 作者:网站首页   |   浏览(60)

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

超炫的jquery仿flash导航栏特效,jquery导航栏

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

演示地址:

复制代码 代码如下:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>demo01</title> 
    <link rel="stylesheet" type="text/css" href="demo.css"> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="demo.js"></script> 
</head> 
<body> 
        <div id="main"> 
        <div class="menu"> 
            <div class="menu_b back1"></div> 
            <span>测试</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back2"></div> 
            <span>测试</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back3"></div> 
            <span>测试</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back4"></div> 
            <span>测试</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back5"></div> 
            <span>测试</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back6"></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'}); 
    }); 
}); 

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

复制代码 代码如下:

/* demo01 css */ 
#main{ 
    background: #EEE; 
    display: inline-block; 
    padding: 10px; 

.menu{position: relative; 
    width: 100px; 
    height: 40px; 
    margin: 10px auto; 

 
.menu_b{ 
    position: absolute; 
    width: 0px; 
    height: 0px; 
    background: red; 
    z-index: 1px; 
    top: 50%; 
    left: 50%; 

.menu span{ 
    position: inherit; 
    display: block; 
    text-align: center; 
    line-height: 40px; 
    z-index: 3px; 
    font-size: 14px; 
    font-family: "Microsoft Yahei"; 
    color: #777; 
    cursor: pointer; 

.back1{ 
    background: #FF0000; 

.back2{ 
    background: #921AFF; 

.back3{ 
    background: #00CACA; 

.back4{ 
    background: #00DB00; 

.back5{ 
    background: #FF5809; 

.back6{ 
    background: #E1E100; 

代码很简单,使用也很简单,就包括修改都简单,小伙伴们自己看着办吧

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

演示地址:

复制代码 代码如下:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>demo01</title> 
    <link rel="stylesheet" type="text/css" href="demo.css"> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="demo.js"></script> 
</head> 
<body> 
        <div id="main"> 
        <div class="menu"> 
            <div class="menu_b back1"></div> 
            <span>测试</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back2"></div> 
            <span>测试</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back3"></div> 
            <span>测试</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back4"></div> 
            <span>测试</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back5"></div> 
            <span>测试</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back6"></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); 
yzc216亚洲城,        span.css({color:'#777'}); 
    }); 
}); 

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

复制代码 代码如下:

/* demo01 css */ 
#main{ 
    background: #EEE; 
    display: inline-block; 
    padding: 10px; 

.menu{position: relative; 
    width: 100px; 
    height: 40px; 
    margin: 10px auto; 

 
.menu_b{ 
    position: absolute; 
    width: 0px; 
    height: 0px; 
    background: red; 
    z-index: 1px; 
    top: 50%; 
    left: 50%; 

.menu span{ 
    position: inherit; 
    display: block; 
    text-align: center; 
    line-height: 40px; 
    z-index: 3px; 
    font-size: 14px; 
    font-family: "Microsoft Yahei"; 
    color: #777; 
    cursor: pointer; 

.back1{ 
    background: #FF0000; 

.back2{ 
    background: #921AFF; 

.back3{ 
    background: #00CACA; 

.back4{ 
    background: #00DB00; 

.back5{ 
    background: #FF5809; 

.back6{ 
    background: #E1E100; 

代码很简单,使用也很简单,就包括修改都简单,小伙伴们自己看着办吧

您可能感兴趣的文章:

  • jQuery点击导航栏选中更换样式的实现代码
  • Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
  • jquery实现垂直和水平菜单导航栏
  • JQuery Mobile实现导航栏和页脚
  • jquery实现鼠标点击后展开列表内容的导航栏效果
  • 简单的jquery左侧导航栏和页面选中效果
  • 用jquery的方法制作一个简单的导航栏
  • jQuery Mobile 导航栏代码
  • JQuery 浮动导航栏实现代码
  • jquery css实现侧边导航栏效果

本文由yzc216亚洲城发布于网站首页,转载请注明出处:超炫的jquery仿flash导航栏特效

关键词: yzc216亚洲城