超炫的jquery仿flash导航栏特效


Posted in Javascript onNovember 11, 2014

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

演示地址:http://demo.3water.com/js/2014/jqeryfangflashdh/demo.html

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

} 

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

Javascript 相关文章推荐
JQuery select标签操作代码段
May 16 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue 实现上传组件
May 31 Vue.js
推荐JavaScript实现继承的最佳方式
Nov 11 #Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 #Javascript
jQuery 动态云标签插件
Nov 11 #Javascript
javascript 回调函数详解
Nov 11 #Javascript
JSON格式化输出
Nov 10 #Javascript
再谈javascript原型继承
Nov 10 #Javascript
让angularjs支持浏览器自动填表
Nov 10 #Javascript
You might like
php实现将上传word文件转为html的方法
2015/06/03 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
学习ExtJS form布局
2009/10/08 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
Python中的多行注释文档编写风格汇总
2016/06/16 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
一文读懂Python 枚举
2020/08/25 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
小学教师岗位职责
2013/11/25 职场文书
财经学院自荐信范文
2014/02/02 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
给小学生的新年寄语
2014/04/04 职场文书
科技之星事迹材料
2014/06/02 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
美术专业自荐信
2014/07/07 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android