导航栏效果丨网站常用效果之导航(1)

闲着没事,想些一些连载

我会在今后更新出一些网站常用的功能和特效并附上源代码,

都是自己写的一些东西 比较简单 一些代码上的东西我会注意注释方便大家理解

今天开篇 网站常用效果之导航(1)

 

效果展示


 

这个是预览,我先把 代码附上之后再说思路

 

Html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>导航栏 www.big-culture.com</title>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="box">
<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<span></span>
</ul>
</div>
<p style="background:#fff;text-align:center;padding:20px 0"> 自己的博客欢迎关注和收藏。<br /> 地址: <a href="http://www.big-culture.com/" target="_blank" style="color:#000">www.big-culture.com</a></p>
</body>
</html>

 

Css




ul {
list-style: none;
}

.box {
width: 1200px;
margin: 0 auto;
}

ul {
background-color: #000;
height: 40px;
position: relative;
}

ul>li {
float: left;
line-height: 40px;
color: #fff;
width: 100px;
text-align: center;
}

span {
width: 100px;
height: 3px;
display: block;
background-color: #42beff;
position: absolute;
top: 37px;
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s
}

 

Js




$(function() {

$("ul>li").hover(function() {

var x = $(this).offset().left - 40; //计算li的位置
//console.log(x);
$("span").css("marginLeft", x)

},
function() {

$("span").css("marginLeft", "0")
});
})

这个导航效果很多网站都会用到 写法很简单 先说一下思路

 

效果是我鼠标经果每个 星期(li) 下方就会出现蓝色(span)的长条,但是这个长条不是直接出现而是移动到鼠标经过的那个星期下方

移动,我该怎么移动他呢?

我在 span 上写了一个定位,我可以用left来控制移动,但是这样的话 css3的过渡就没作用,所以我用的是margin-left去移动 span

既然知道了用margin-left去移动span的话,那么margin-left的值该设置多少呢?

我们可以获取鼠标经过后 li 离 div的距离

获取的方法我用的是JQ的方法

.offset().left

以上就是思路,往大家能理解,不懂的地方可以评论提出。

 

未经允许不得转载:绿岛小站 » 导航栏效果丨网站常用效果之导航(1)

赞 (3)

评论 0

评论前必须登录!

登陆 注册