动态导航栏和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. Java中的String到底占用多大的内存空间？你所了解的可能都是错误的！！

    写在前面 最近小伙伴加群时,我总是问一个问题:Java中的String类占用多大的内存空间?很多小伙伴的回答着实让我哭笑不得,有说不占空间的,有说1个字节的,有说2个字节的,有说3个字节的,有说不知道 ...

  2. GDB常用调试命令（二）

    GDB信号处理 在GDB中使用handle命令定义一个信号处理.信号可以以SIG开头或不以 SIG开头,可以用定义一个要处理信号的范围(如:SIGIO-SIGKILL,表示处理从SIGIO信号到SIG ...

  3. ssh免密登陆 2

    应用场景之一:java 程序调用shell脚本,通过ssh 免密登陆数据库服务器,进行数据的抽取打包工作. 免密设置步骤: 1.客户端生成公私钥,在任意目录下执行命令ssh-keygen(一路回车默认 ...

  4. 论文解读《Deep Resdual Learning for Image Recognition》

    总的来说这篇论文提出了ResNet架构,让训练非常深的神经网络(NN)成为了可能. 什么是残差? "残差在数理统计中是指实际观察值与估计值(拟合值)之间的差."如果回归模型正确的话 ...

  5. 前端-jstree 一些常用功能

    最近使用到了jstree(v3.3.4)这个插件(官网:https://www.jstree.com/),在这里记录下我的使用过程的一些技巧和问题. 1. 获取数据 一般实际项目中用到的数据都是aja ...

  6. 如何分析、排查、解决Redis变慢问题？

    关于如何分析.排查.解决Redis变慢问题,根据实践总结了一些清单如下: 1.使用复杂度过高的命令(例如SORT/SUION/ZUNIONSTORE/KEYS),或一次查询全量数据(例如LRANGE ...

  7. js逻辑程序

    JavaScript 是 Web 的编程语言. 所有现代的 HTML 页面都使用 JavaScript. JavaScript 非常容易学. 本教程将教你学习从初级到高级 JavaScript 知识. ...

  8. 【Flutter 混合开发】添加 Flutter 到 iOS

    Flutter 混合开发系列 包含如下: 嵌入原生View-Android 嵌入原生View-iOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生 ...

  9. Java_多线程实现

    一个类两个接口 Tread类: 使用时继承Thread类 Runnable接口: 使用时实现Runnable接口 Callable接口: 使用时实现Callable接口 由于类只能单继承, 接口可以多 ...

  10. axios网络封装模块

    功能特点 在浏览器中发送XMLHttpRequests请求 在node.js总发送http请求 支持Promise API 拦截请求和相应 转换请求和响应数据 axios请求方式 支持多种请求方式 a ...