jquery 实现导航栏滑动效果
2016-04-07 21:41
597 查看
原文:http://www.cnblogs.com/WebMobile/p/3926921.html
精简的代码实现导航栏滑动效果,实现详解:
1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动;
2.导航栏居中:通过left=0px,right=0px,margin-left=auto,margin-right=auto实现;
3.通过jQuery动态改变滑块的Left和Width,然后通过animate实现动画效果。
</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>滑动导航栏</title>
<script scr=""></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
body,div,p{
margin:0;
padding:0;
}
.nav{
background-color:black;
position:fixed;
left:0px;
right:0px;
width:80%;
margin:10px auto;
text-align:center;
height:37px;
}
.nav a{
padding:10px;
color:white;
line-height:30px;
text-decoration:none;
height:37px;
}
#navslip{
height:2px;
background-color:#8f919e;
position:absolute;
bottom:7px;
width:0px;
left:0px;
display:none;
overflow:hidden;
}
</style>
</head>
<body>
<div class="nav">
<a href="http://baidu.com" target="_black" >百度</a>
<a href="http://sina.com" target="_black" >新浪</a>
<a href="http://58.com" target="_black" >58同城</a>
<a href="http://sentsin.com/message/" target="_black" title="留言">致时光</a>
<a href="http://sentsin.com/daohang/" target="_black">前端圈</a>
<i id="navslip"></i>
</div>
<script>
$(function (){
setSlip();
});
var setSlip = function(){
var slip = $('#navslip');
var a = $('.nav a:first');
//初始化滑块
slip.css({
'width':a.width()+10,
'left' :parseInt(a.position().left) + 5 +'px'
});
$('.nav a').mouseenter(function(){
//显示滑块
if(slip.css('display') == 'none'){
slip.show();
};
//移动滑块
slip.stop().animate({
width: $(this).width()+10,
left: parseInt($(this).position().left) + 5 +'px'
},300);
});
};
</script>
</body>
</html>
精简的代码实现导航栏滑动效果,实现详解:
1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动;
2.导航栏居中:通过left=0px,right=0px,margin-left=auto,margin-right=auto实现;
3.通过jQuery动态改变滑块的Left和Width,然后通过animate实现动画效果。
</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>滑动导航栏</title>
<script scr=""></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
body,div,p{
margin:0;
padding:0;
}
.nav{
background-color:black;
position:fixed;
left:0px;
right:0px;
width:80%;
margin:10px auto;
text-align:center;
height:37px;
}
.nav a{
padding:10px;
color:white;
line-height:30px;
text-decoration:none;
height:37px;
}
#navslip{
height:2px;
background-color:#8f919e;
position:absolute;
bottom:7px;
width:0px;
left:0px;
display:none;
overflow:hidden;
}
</style>
</head>
<body>
<div class="nav">
<a href="http://baidu.com" target="_black" >百度</a>
<a href="http://sina.com" target="_black" >新浪</a>
<a href="http://58.com" target="_black" >58同城</a>
<a href="http://sentsin.com/message/" target="_black" title="留言">致时光</a>
<a href="http://sentsin.com/daohang/" target="_black">前端圈</a>
<i id="navslip"></i>
</div>
<script>
$(function (){
setSlip();
});
var setSlip = function(){
var slip = $('#navslip');
var a = $('.nav a:first');
//初始化滑块
slip.css({
'width':a.width()+10,
'left' :parseInt(a.position().left) + 5 +'px'
});
$('.nav a').mouseenter(function(){
//显示滑块
if(slip.css('display') == 'none'){
slip.show();
};
//移动滑块
slip.stop().animate({
width: $(this).width()+10,
left: parseInt($(this).position().left) + 5 +'px'
},300);
});
};
</script>
</body>
</html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- HTML5调用摄像头实例
- JavaScript 各种遍历方式详解
- 数组方法汇总
- Apple官网研究之使用Justify布局导航
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例