用原生JS实现爱奇艺首页导航栏代码实例


Posted in Javascript onSeptember 19, 2019

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

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

代码如下:

<html>
<head>
  <title>爱奇艺</title>
  <meta charset="utf-8">
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }
    .wrap {
      height: 520px;
      background-color: #000;
      width: 100%;
    }
    .wrap .img-wrap {
      height: 100%;
      margin: 0 auto;
      background-image: url('1.jpg');
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: auto 100%;
      position: relative;
    }
    /* 媒体查询 */
    @media screen and (max-width: 2000px) {
      .wrap .img-wrap .item-list {
        right: 10%;
      }
    }
    @media screen and (max-width: 1600px) {
      .wrap .img-wrap .item-list {
        right: 8%;
      }
    }
    @media screen and (max-width: 1300px) {
      .wrap .img-wrap .item-list {
        right: 5%;
      }
    }
    .wrap .img-wrap .item-list {
      box-sizing: border-box;
      height: 100%;
      background-color: rgba(0,0,0,0.7);
      width: 280px;
      position: absolute;
      
      list-style: none;
      padding: 10px 0;
    }
    .wrap .img-wrap .item-list li {
      padding: 0 15px;
    }
    .wrap .img-wrap .item-list li.active {
      /*background-color: -webkit-linear-gradient(left, rgba(0,0,0,.3), rgba(0,0,0,0.1));*/
      background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0));
      cursor: pointer;
    }
    .wrap .img-wrap .item-list li span {
      line-height: 40px;
      color: #eee;
      font-size: 16px;
    }
    .wrap .img-wrap .item-list li.active span {
      color: #00be06;
      display: block;
    }
    .wrap .img-wrap .item-list li.active span:nth-child(1) {
      font-size: 24px;
      transition: font-size 0.2s;
    }
    .wrap .img-wrap .item-list li.active span:nth-child(2) {
      display: none;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="img-wrap">
      <ul class="item-list">
      </ul>
    </div>
  </div>
  <script type="text/javascript">
    let items = [
        {
          title: '遇见幸福',
          desc: '24点体会人生百味',
          url: '1.jpg'
        },
        {
          title: '中国达人秀',
          desc: '真假岳岳在线劈叉',
          url: '2.jpg'
        },
        {
          title: '中国新说唱',
          desc: '全国4强诞生!',
          url: '3.jpg'
        },
        {
          title: '做家务',
          desc: '魏大勋花钱做音乐',
          url: '4.jpg'
        },
        {
          title: '扫毒2',
          desc: '刘德华硬战古天乐',
          url: '5.jpg'
        },
        {
          title: '加油',
          desc: '郝泽宁隔屏告白福子',
          url: '6.jpg'
        },
        {
          title: '小欢喜',
          desc: '宋倩乔卫东重归于好',
          url: '7.jpg'
        },
        {
          title: '谋爱上瘾',
          desc: '契约夫妇遇感情危机',
          url: '8.jpg'
        },
        {
          title: '此食此客',
          desc: '啤酒花蛤夏日绝配',
          url: '9.jpg'
        },
        {
          title: '爱奇艺特别策划',
          desc: '我们的70年',
          url: '10.jpg'
        }
    ];  // 需要展示的数据,通常从后端获取

    let curIndex = 0;  // 当前索引
    let isAutoMove = true; // 是否可以自动改变图片    
    let interval = 1000; // 自动轮播的间隔时间
    // 封装函数:生成新的标签
    function createTag(tag) {
      return document.createElement(tag);
    }
    // 封装函数:生成文本节点
    function createText(text) {
      return document.createTextNode(text);
    }
    // 封装函数:初始化列表
    function initItemList() {
      let ul = document.getElementsByClassName('item-list')[0];
      
      for (let i = 0; i < items.length; i++) {
        let li = createTag('li');
        if (i == 0) { li.classList.add('active') }
        let span1 = createTag('span');
        let span2 = createTag('span');
        let span3 = createTag('span');
        let text1 = createText(items[i].title);
        let text2 = createText(':');
        let text3 = createText(items[i].desc);
        span1.appendChild(text1);
        span2.appendChild(text2);
        span3.appendChild(text3);
        li.appendChild(span1);
        li.appendChild(span2);
        li.appendChild(span3);
        ul.appendChild(li);
        addHoverListener(li, i);
      } 
    }
    // 鼠标hover右侧栏时改变背景图片及文字样式
    function addHoverListener(trigger, index) {
      trigger.addEventListener('mouseenter', function () {
        curIndex = index;  // 保存当前索引
        changeImage();
        activeText();
      });
    }
    // 根据index改变背景图片
    function changeImage() {
      console.log('curIndex: ', curIndex);
      let imgUrl = items[curIndex].url;
      let imgWrap = document.getElementsByClassName('img-wrap')[0];
      imgWrap.style.cssText = "background-image: url('" + imgUrl + "')";
    }
    // 根据index改变右侧激活文本的样式
    function activeText() {
      let activeObj = document.getElementsByClassName('active')[0];
      let li = document.getElementsByTagName('li')[curIndex];
      if (activeObj) {
        activeObj.classList.remove('active');
      }
      li.classList.add('active');
    }
    // 鼠标移入移出wrap区域时响应关闭、开启自动轮播
    function addEnterListener() {
      let wrap = document.getElementsByClassName('wrap')[0];
      wrap.addEventListener('mouseenter', function () {
        isAutoMove = false;
      });
      wrap.addEventListener('mouseleave', function () {
        isAutoMove = true;
      });
    }
    // 定时切换图片:使用定时器setInterval(function(){}, time)
    function autoMove() {
      let timer = setInterval(function () {
        if (isAutoMove) {
          if (curIndex < 9) {
            curIndex ++;
          } else {
            curIndex = 0;
          }
          changeImage();
          activeText();
        }
      }, interval);
    }
    window.onload = function () {
      initItemList();
      addEnterListener();
      autoMove();
    }
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
layui导航栏实现代码
May 19 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
Element Input组件分析小结
Oct 11 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
vue简单练习 桌面时钟的实现代码实例
Sep 19 #Javascript
JS实现滚动条触底加载更多
Sep 19 #Javascript
Vue v-text指令简单使用方法示例
Sep 19 #Javascript
Vue.set 全局操作简单示例
Sep 19 #Javascript
layui对工具条进行选择性的显示方法
Sep 19 #Javascript
基于js实现抽红包并分配代码实例
Sep 19 #Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
PHP对象实例化单例方法
2017/01/19 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
js实现炫酷光感效果
2020/09/05 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
python中pass语句用法实例分析
2015/04/30 Python
python学习之编写查询ip程序
2016/02/27 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Python控制Firefox方法总结
2019/06/03 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Python模块 _winreg操作注册表
2020/02/05 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
网上卖盒饭创业计划书范文
2014/02/07 职场文书
工商管理专业自荐信
2014/06/03 职场文书
毕业生求职信
2014/06/10 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
党员作风建设整改方案
2014/10/27 职场文书
新郎答谢词
2015/01/04 职场文书
工作感想范文
2015/08/07 职场文书