动态导航栏和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. 置Hugo的代码高亮

    +++ date="2020-10-17" title="设置Hugo的代码高亮" tags=["hugo"] categories=[&q ...

  2. centos8平台:用fontconfig安装及管理字体(fc-list/fc-match/fc-cache)

    一,fc-list所属的rpm包 [root@blog ~]$ whereis fc-list fc-list: /usr/bin/fc-list /usr/share/man/man1/fc-lis ...

  3. docker19.03使用数据卷

    一,查看当前的docker版本 [root@localhost data]# docker --version Docker version 19.03.8, build afacb8b 说明:刘宏缔 ...

  4. 使用Sparse Checkout 排除跟踪Git仓库中指定的目录或文件

    应用场景 在一个大工程里包含由不同部门开发的模块时,项目的Git仓库肯定很大,造成每次Git操作相对比较耗时.因为开发人员一般只关心他们部门的模块的代码,所以完全可以排除一些他完全不需要用到的目录.这 ...

  5. EFS加密

    目录 EFS简介 EFS的特点 EFS的缺陷 EFS证书 证书的导出 证书的安装 EFS加密 方法一 方法二 EFS简介 EFS(Encrypting File System,加密文件系统)是Wind ...

  6. pytho爬虫使用bs4 解析页面和提取数据

    页面解析和数据提取 关注公众号"轻松学编程"了解更多. 一般来讲对我们而言,需要抓取的是某个网站或者某个应用的内容,提取有用的价值.内容一般分为两部分,非结构化的数据 和 结构化的 ...

  7. python框架Django使用xadmin管理后台数据

    Django使用xadmin管理后台数据 关注公众号"轻松学编程"了解更多. 作用:xadmin比Django内置的admin更美观.更方便. 一.导入xadmin(第三方库) 方 ...

  8. python使用pip安装第三方模块遇到的问题及解决方法

    python使用pip安装第三方模块遇到的问题及解决方法 关注公众号"轻松学编程"了解更多. 使用国内源: 清华:https://pypi.tuna.tsinghua.edu.cn ...

  9. python创建Django项目

    创建Django项目 关注公众号"轻松学编程"了解更多. 创建一个HelloDjango项目 GitHub地址:https://github.com/liangdongchang/ ...

  10. 如何使用捷映App制作朋友圈九宫格视频图片合集

    在刷朋友圈的过程中,看到九宫格的视频图片合集,带有酷炫的音效和动效,展现效果非常好,那么我们该如何制作呢?下面我为大家介绍. 第一步,我们需要在各大应用市场搜索[捷映视频制作]App,点击[安装]. ...