超炫的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 相关文章推荐
简明json介绍
Sep 28 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
Vue+Flask实现图片传输功能
Apr 01 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
我的群发邮件程序
2006/10/09 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
python3实现磁盘空间监控
2018/06/21 Python
香港交友网站:be2香港
2018/07/22 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
电子商务专业推荐信范文
2013/12/02 职场文书
会计系中文个人求职信
2013/12/24 职场文书
工程业务员岗位职责
2013/12/31 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
企业文化建设实施方案
2014/03/22 职场文书
培训讲师岗位职责
2014/04/13 职场文书
青春无悔演讲稿
2014/05/08 职场文书
我爱我校演讲稿
2014/05/21 职场文书
村党支部公开承诺书
2014/05/29 职场文书
小组名称和口号
2014/06/09 职场文书
合作协议书范文
2014/08/20 职场文书
最美家庭活动方案
2014/08/31 职场文书
借款协议书
2014/09/16 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python