怎么使用原生JS实现爱奇艺首页导航栏

　　介绍

小编给大家分享一下怎么使用原生JS实现爱奇艺首页导航栏,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

最近接到领导的任务,要给外面的学生上几节前端课,备课的时候准备了一些小项目,在此记录一下。

以下是爱奇艺首页的一个导航栏,用原生JS写的,静态页面效果如下:

代码如下:

& lt; html> 　　& lt; head> 　　& lt;才能title>爱奇艺& lt;/title> 　　& lt;才能meta  charset=皍tf-8"比; 　　& lt;才能style 类型=拔谋?css"比; 　　,,,*,{ 　　,,,,,填充:,0; 　　,,,,,保证金:,0; 　　,,,} 　　,,,.wrap  { 　　,,,,,身高:,520 px; 　　,,,,,背景颜色:,# 000; 　　,,,,,宽度:,100%; 　　,,,} 　　,,,.wrap  .img-wrap  { 　　,,,,,身高:,100%; 　　,,,,,保证金:,0,汽车; 　　,,,,,背景图片:,url (& # 39; 1. jpg # 39;); 　　,,,,,平铺方式:,不再重演; 　　,,,,,背景位置:,50%,50%; 　　,,,,,background-size:, auto  100%; 　　,,,,,位置:,相对; 　　,,,} 　　,,,/*,媒体查询,*/,,,@media  screen 以及(max-width: 2000 px), { 　　,,,,,.wrap  .img-wrap  .item-list  { 　　,,,,,,,对的:,10%; 　　,,,,,} 　　,,,} 　　,,,@media  screen 以及(max-width: 1600 px), { 　　,,,,,.wrap  .img-wrap  .item-list  { 　　,,,,,,,对的:,8%; 　　,,,,,} 　　,,,} 　　,,,@media  screen 以及(max-width: 1300 px), { 　　,,,,,.wrap  .img-wrap  .item-list  { 　　,,,,,,,对的:,5%; 　　,,,,,} 　　,,,} 　　,,,.wrap  .img-wrap  .item-list  { 　　,,,,,box-sizing:, border-box; 　　,,,,,身高:,100%; 　　,,,,,背景颜色:,rgba (0, 0, 0, 0.7); 　　,,,,,宽度:,280 px; 　　,,,,,位置:,绝对; 　　,,,,, 　　,,,,,list-style:,没有; 　　,,,,,填充:,10 px  0; 　　,,,} 　　,,,.wrap  .img-wrap  .item-list  li  { 　　,,,,,填充:,0,15 px; 　　,,,} 　　,,,.wrap  .img-wrap  .item-list  li.active  { 　　,,,,,/* background:, -webkit-linear-gradient(左),rgba (0, 0, 0, 0。3), rgba (0, 0, 0, 0.1); */,,,,,背景:,线性渐变(用正确的,,rgba (0, 0, 0, 0。5), rgba (0, 0, 0, 0)); 　　,,,,,光标:,指针; 　　,,,} 　　,,,.wrap  .img-wrap  .item-list  li  span  { 　　,,,,,行高:,40像素; 　　,,,,,颜色:,# eee; 　　,,,,,,字体大小:16 px; 　　,,,} 　　,,,.wrap  .img-wrap  .item-list  li.active  span  { 　　,,,,,颜色:,# 00 be06; 　　,,,,,显示:,块; 　　,,,} 　　,,,.wrap  .img-wrap  .item-list  li.active 跨度:nth-child (1), { 　　,,,,,字体大小:,24 px; 　　,,,,,的转变:,font-size  0.2年代; 　　,,,} 　　,,,.wrap  .img-wrap  .item-list  li.active 跨度:nth-child (2), { 　　,,,,,显示:,没有; 　　,,,} 　　& lt;才能/style> 　　& lt;/head> 　　& lt; body> 　　& lt;才能div 类=皐rap"比; 　　,,,& lt; div 类=癷mg-wrap"比; 　　,,,,,& lt; ul 类=癷tem-list"比; 　　,,,,,& lt;/ul> 　　,,,& lt;/div> 　　& lt;才能/div> 　　& lt;才能script 类型=拔谋?javascript"比; 　　,,,let  items =, ( 　　,,,,,,,{ 　　,,,,,,,,,标题:,& # 39;遇见幸福& # 39;, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么使用原生JS实现爱奇艺首页导航栏