jquery-仿flash的一个导航栏特效

演示地址：http://itxiaoming.sinaapp.com/demo05/demo.html

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>

Js代码

$(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‘});
});
});

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

Css代码

/* 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)

时间： 2024-08-29 09:17:54

jquery-仿flash的一个导航栏特效的相关文章

仿京东商城左侧的一个导航条特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

利用JQ实现的，高仿彩虹岛官网导航栏（学习HTML过程中的小记录）

利用JQ实现的,高仿彩虹岛官网导航栏(学习HTML过程中的小记录) 作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $("").css() 这里css是小写的,用 HBuilder 编写补全是大写的..这里要注意主要使用的方法:jQuery 隐藏 / 显示 jQuery 淡出淡入需要注意的知识点: 效果的样式: 代码如下:(亲们自己展开拉~) 1 <!DOCTYPE html> 2 <

css小案例:导航栏特效

css小案例:导航栏特效,实现如下图所示效果: 首先可以将html代码写出: 1 <nav class="cl-effect-1"> 2 <a href="#">Umbrella</a> 3 <a href="#">Ineffable</a> 4 <a href="#">Lilt</a> 5 <a href="#"&g

基于jQuery右侧弹出侧边导航栏代码

基于jQuery右侧弹出侧边导航栏代码.这是一款点击按钮弹出侧边导航栏样式特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="box-bj"><img src="images/wd011.jpg" /></div> <div id="mintbar"><a id="closebtn" href="#"&g

基于jQuery仿Flash横向切换焦点图

给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自动切换图片,也可以点击导航按钮来切换至指定的图片.该jQuery焦点图使用非常简单,而且切换效果也相当流畅.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="slide-holder"> <div id="slide-runn

使用TabLayout快速实现一个导航栏

在没有Material Design的年代,要实现一个类似微信主页面的效果,我们有以下几种解决方案: 1.Fragment + ViewPager + RadioGroup自定义固定导航条 2.Fragment + ViewPager 带滑动导航条 3.Fragment + ViewPager + HorizontalScrollView自定义滑动导航条当然,除了这些之外,还有许多已经被Google丢弃的方案,我们就不说了.当有了Material Design之后,一切都变得那么漂亮,

基于jQuery仿迅雷影音官网幻灯片特效

分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="wrapper"> <div id="content" class="content"> <div class="s_arr"> <a class=&quo

html表单——使用frameset写一个导航栏效果

主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!--frameset 说明:1.frameset不能潜入在body标签里面,只能嵌入在html标

android高仿微信底部渐变导航栏

最近有很多人微信底部的变色卡片导航是怎么做的,我在网上看了好几个例子,都是效果接近,都存有一些差异,自己琢磨也做了一个,几乎99%的还原,效果还不错吧仔细观察微信图片,发现他有两部分内容,外面的边框和里面的内容,内容的颜色由绿变为透明,这部分可以直接改变透明度,外面的边框,颜色在灰色和绿色之间变化,就不能简单的改变透明度了,ImageView的tint 为我们提供了可行方案,tint可以为图标着色,既可以在xml中,也可以在代码中设置,一共有16中模式,分别为在xml中设置:直接添加tint