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

}

动态导航栏和JavaScript箭头函数的更多相关文章

  1. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

  2. 轻松学习 JavaScript——第 6 部分：JavaScript 箭头函数

    JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法.通常,在JavaScript中,可以通过两种方式创建函数: 函数语句. 函数表达式. 可以如下所示创建函数语 ...

  3. JavaScript箭头函数中的this详解

    前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log(" ...

  4. JavaScript箭头函数 和 generator

    箭头函数: 用箭头定义函数........           var fun = x=>x*x alert(fun(2))            //单参数   var fun1 = ()=& ...

  5. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  6. jsp动态导航栏

    站点页面的导航栏是从数据库中生成出来的,所以在界面上展示导航栏时,要从数据库中读取出来,但不能每次显示一个页面都从数据库中读.这样就非常浪费性能.应该考虑把导航栏放到一个缓存中.如:session.a ...

  7. javascript箭头函数把函数给简写了[0403]

    箭头函数把函数给简写了[0403]        我不是很喜欢箭头函数,总觉得它让原本就不那么严谨的js更加不严谨了,所以有时候看js程序也是一件很头痛的事情,不过在ES6中加入了这么一个新的方法,已 ...

  8. JavaScript 箭头函数

    ES6新标准增加了一种新的函数,箭头函数. x=>x*x 相当于: function (x){ return x*x; } 如果参数不是一个,就需要用括号()括起来: // 两个参数:var t ...

  9. javascript 箭头函数的使用 初学者必看

    为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 本文我们介绍箭头(arrow)函数的优点. 更简洁的语法我们先来按常规语法定义函数: 1 2 3 4 5 funct ...

随机推荐

  1. requirements基本使用

    requirements作用描述:很多 Python 项目中经常会包含一个 requirements.txt 文件,里面内容是项目的依赖包及其对应版本号的信息列表,即项目依赖关系清单,其作用是用来重新 ...

  2. Linux系统及第三方应用官方文档

    通过在线文档获取帮助 http://www.github.com https://www.kernel.org/doc/html/latest/ http://httpd.apache.org htt ...

  3. pwn之栈缓冲区溢出漏洞（入门）

    题目ret2text 题目信息确认 使用file命令查看文件类型 root@CTF:/home/# file ret2text ret2text: ELF 32-bit LSB executable, ...

  4. 18 . Go之操作Mysql和sqlx使用

    安装mysql wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm yum -y localinstall ...

  5. 把 Console 部署成 Windows 服务，四种方式总有一款适合你！

    一:背景 1. 讲故事 上周有一个项目交付,因为是医院级项目需要在客户的局域网独立部署. 程序: netcore 2.0,操作系统: windows server 2012,坑爹的事情就来了, net ...

  6. git 上传代码报错eslint --fix found some errors. Please fix them and try committing again.

    在提交时用下面这句 git commit --no-verify -m "提交时的注释"

  7. Yii2使用数据库操作汇总（增删查改、事务）

    查询 //1.简单查询 $admin=Admin::model()->findAll($condition,$params); $admin=Admin::model()->findAll ...

  8. 删除指定路径下指定天数之前（以文件的创建日期为准）的文件：BAT + REG + Ritchie Lawrence 日期函数

    代码如下: @echo off::演示:删除指定路径下指定天数之前(以文件的创建日期为准)的文件.::如果演示结果无误,把del前面的echo去掉,即可实现真正删除.::本例调用了 Ritchie L ...

  9. python爬虫使用xpath解析页面和提取数据

    XPath解析页面和提取数据 一.简介 关注公众号"轻松学编程"了解更多. XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言.X ...

  10. python时间Time模块

    时间和日期模块 关注公众号"轻松学编程"了解更多. python程序能用很多方式处理日期和时间,转换日期格式是一种常见的功能. python提供了一个time和calendar模块 ...