动态导航栏和JavaScript箭头函数
动态导航栏和JavaScript箭头函数
今天我们来写一下动态的导航栏，并且学一下JavaScript的箭头函数等相关问题。
样式如下所示：
html中执行代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #000;
}
.box{
width: 800px;
height: 42px;
margin: 100px auto;
background: url(images/rss.png) no-repeat right center #fff;
border-radius: 5px;
position: relative;
z-index: 0;
}
.box ul{
list-style: none;
position: relative;
}
.box ul li{
float: left;
width: 83px;
height: 42px;
font-size: 14px;
line-height: 42px;
text-align: center;
cursor: pointer;
}
.box .bg{
width: 83px;
height: 42px;
background: url(images/cloud.gif) no-repeat;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<div class="box" id = "nav">
<ul>
<li>新闻模块</li>
<li>体育模块</li>
<li>财经模块</li>
<li>汽车模块</li>
<li>天气模块</li>
<li>国内新闻</li>
<li>国内新闻</li>
<li>国内新闻</li>
</ul>
<span class="bg" id="logo"></span>
</div>
</body>
</html>
JavaScript的部分代码如下所示：
function $(id) { return document.getElementById(id); }
window.onload = function() {
var logo = $('logo');
var leader = 0, target = 0;
setInterval(() => {
//这里是箭头函数
leader = leader + (target - leader) / 10;
logo.style.left = leader + 'px';
}, 10);
var lis = $('nav').getElementsByTagName('li');
var pos = 0;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
target = this.offsetLeft;
}
lis[i].onmouseout = function() {
target = pos;
}
lis[i].onclick = function() {
pos = this.offsetLeft;
}
}
}
下面我们来学一下箭头函数：
在ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
为什么叫Arrow Function？因为它的定义用的就是一个箭头：
x => x * x
上面的箭头函数相当于：
function (x) {
return x * x;
}
箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式：
①、只包含一个表达式，连{ ... }和return都省略掉了。
②、可以包含多条语句，这时候就不能省略{ ... }和return;
x => {
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
}
如果参数不是一个，就需要用括号()括起来：
// 两个参数:
(x, y) => x * x + y * y
// 无参数:
() => 3.14
// 可变参数:
(x, y, ...rest) => {
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}
