动态导航栏和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;
}