jquery-仿flash的一个导航栏特效
演示地址:http://itxiaoming.sinaapp.com/demo05/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;
- }
- demo05.zip (33.2 KB)
jquery-仿flash的一个导航栏特效的更多相关文章
- 用Jquery 仿VS 样式的 导航栏插件
在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...
- 仿酒仙网的一款jQuery侧栏弹出导航栏特效
仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...
- 利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)
利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录) 作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- 基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
- 使用TabLayout快速实现一个导航栏
在没有Material Design的年代,要实现一个类似微信主页面的效果,我们有以下几种解决方案: 1.Fragment + ViewPager + RadioGroup自定义固定导航条 2.F ...
- 如何做一个导航栏————浮动跟伪类(hover)事件的应用
我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focu ...
- 基于jQuery仿迅雷影音官网幻灯片特效
分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html ...
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
随机推荐
- 懒人习惯之ButterKnife Zelezny
项目地址:https://github.com/avast/android-butterknife-zelezny 这个是Android Studio的插件. 其实就间接帮你把LoadView的过 ...
- 关于Eclipse如何加入Gradle文件与Android Studio两个平台一起开发,工作目录不发生变化
前言: 本来很久之前想弄这玩意,不过因为各种原因,所以没弄. 今天有位前辈提出需求.说想让Eclipse的Android项目逐步走向Android Studio,但是又担心Android Studio ...
- activiti工作流之Eclipse的Eclipse BPMN 2.0 Designer无法安装或者(安装后无法重复打开*.bpmn)
1.首先.既然学习activiti工作流,连官网和相应文件都没有下载就说不过去了 这是官网下载:http://www.activiti.org/download.html 2.对于下载后的activi ...
- Java常考面试题(一)
序言 我是一只乱飞乱撞的菜鸟,写的文章目前是以记录自己学习,和方便以后查看,期待日后不久能通过自己的努力,获得一点小小的成功,然后写出我的学习经验总结性文章来. ---WH 一.什么是虚拟机?为什么J ...
- 【Unity】第11章 第三人称角色控制器和碰撞体
分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 第三人称视角控制器涉及的相关概念有: 1.刚体(Rigidbody). 2.碰撞体(Collider).包括球体碰撞体( ...
- (UML总结三)UML与软件project
学习完UML.我们要把它和之前的软件project结合起来.软件project是从总体的角度说了软件开发的步骤.保证了所开发软件的质量.而UML作为一种统一建模语言.是用来设计软件蓝图的可视化建模语言 ...
- IBAction:IBOutlet:注意事项
1.IBAction: 1> 能保证方法能够连线 > 相当于void 2.IBOutlet: 1> 能保证属性能够连线 3.常见错误 setValue:forUndefinedKey ...
- .NET MVC+ EF+调用存储过程 多表联查以及VIEW列表显示
直接上干活,至于网上的一大堆处理方式不予评论,做好自己的就是最好的,供大家不走弯路 1.view页面 <link href="~/Content/bootstrap.css" ...
- c--日期和时间函数
C的标准库<time.h>包含了一些处理时间与日期的函数. 1.clock_t clock(void); 函数返回程序自开始执行后的处理器时间,类型是clock_t,单位是tick.如果有 ...
- COMPILING ACTIONSCRIPT 3.0 WITH SUBLIME TEXT 2
At Clock we typically spend our time developing JavaScript and PHP, however, occasionally Flash pres ...