前端开发者移动前端开发百度网盘|前端开发移动端问题|前端 chrome 开发插件
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>手机前端快速开发框架：底部导航滑块效果</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
a:focus,
button:focus,
input:focus,
textarea:focus {
outline: 0;
}
img {
border: 0;
}
/*设置默认div的宽度为100%,高度自动,并且可以追加类名添加背景颜色或图片, 最后清除浮动*/
.container {
width: 100%;
height: auto;
}
.container:after {
content: “”;
height: 0;
display: block;
clear: both;
visibility: hidden;
}
/*设置居中效果,并且赋予最小宽度,解决:拉伸浏览器时,挤压元素*/
.wrapper {
margin: 0 auto;
width: 90%;
min-width: 1240px;
height: auto;
position: relative;
}
nav {
width: 600px;
margin: 0 auto;
}
.nav-list {
width: 100%;
list-style-type: none;
}
.nav-list li {
display: inline-block;
margin: 5px;
width: 90px;
float: left;
}
.nav-list li a {
display: block;
text-align: center;
font-size: 16px;
color: #0DAF90;
}
.slidenav {
margin-top: 10px;
width: 100%;
height: 3px;
float: left;
box-sizing: border-box;
box-shadow: 0 1px 10px #ccc;
}
.slide-span {
border-bottom: 3px solid #0daf90;
box-shadow: 2px 2px 10px #0DAF90;
float: left;
width: 100px;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”wrapper”>
<nav>
<ul class=”nav-list” id=”nav-list”>
<li class=”nav-current”>
<a href=”#”>
<span class=”nav-span”>导航0</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”nav-span”>导航1</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”nav-span”>导航2</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”nav-span”>导航3</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”nav-span”>导航4</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”nav-span”>导航5</span>
</a>
</li>
</ul>
<div class=”slidenav”>
<span class=”slide-span”></span>
</div>
</nav>
</div>
</div>
</body>
<script>
$(function () {
var slideli = $(“.nav-current”).index() * 100;
$(“.slide-span”).css({
“margin-left”: slideli
}, 500);
$(“nav ul li a”).hover(function () {
var slidelistart = $(this).parents().index();
var slideli = ($(this).parents().index()) * 100;
$(“.slide-span”).stop().animate({
“margin-left”: slideli
}, 500);
}, function () {
var slideli = $(“.nav-current”).index() * 100;
$(“.slide-span”).stop().animate({
“margin-left”: slideli
}, 500);
})
})
</script>
</html>
web前端开发华为招聘|前端开发调用本地摄像头的插件|天津前端开发招聘信息
» 本文来自：前端开发者 » 《前端开发 导航底部滑块特效》
» 本文链接地址：https://www.rokub.com/4948.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册