动态导航栏和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. Nginx禁止html等缓存

    +++ date="2020-10-16" title="Nginx禁止html等缓存" tags=["nginx"] categories ...

  2. spring boot:用rocketmq发送延时消息用来取消订单（spring boot 2.3.3）

    一,为什么要用延时消息来取消订单? 1,为什么要取消订单 在电商的下单过程中,需要在生成订单时扣减库存, 但有可能发生这种情况:用户下了单,临时改变主意不再支付, 则订单不能无限期的保留,因为还要把占 ...

  3. centOS7 查看防火墙状态 开放端口

    一.防火墙的开启.关闭.禁用命令 (1)设置开机启用防火墙:systemctl enable firewalld.service (2)设置开机禁用防火墙:systemctl disable fire ...

  4. 运行bee run之后出现的错误以及解决方法Failed to build the application:

      运行bee run之后出现的错误以及解决方法 创建一个beego项目 bee new myapp 在该项目执行下面的代码 bee run 出现的问题 2020/04/22 21:12:07 INF ...

  5. docker19.03搭建私有容器仓库

    一,启动docker后,搜索registry [root@localhost source]# systemctl start docker [root@localhost source]# dock ...

  6. Python字典的初识、增删改查及嵌套

    为什么要有字典? 列表可以存储大量的数据,但数据间的关联型不强 列表的查询速度相对慢 dict:字典,容器型数据类型 数据类型的分类: 可变与不可变 可变(不可哈希)的数据类型: 列表list,字典d ...

  7. day73:drf:drf视图相关类&路由Routers&创建虚拟环境

    目录 1.APIView 2.GenericAPIView:通用视图类 3.5个视图扩展类:ListModelMixin,CreateModelMixin,RetrieveModelMixin,Upd ...

  8. Ⅰ Introduction to Reinforcement Learning

    Dictum:  To spark, often burst in hard stone. -- William Liebknecht 强化学习(Reinforcement Learning)是模仿人 ...

  9. Camera2使用textureView支持

    SurfaceView 绘制会有独立窗口, TextureView 没有独立的窗口,可以像普通的 View 一样,更高效更方便 public class MainActivity extends Ap ...

  10. D. New Year Santa Network 解析(思維、DFS、組合、樹狀DP)

    Codeforce 500 D. New Year Santa Network 解析(思維.DFS.組合.樹狀DP) 今天我們來看看CF500D 題目連結 題目 給你一棵有邊權的樹,求現在隨機取\(3 ...