用原生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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
微信小程序实现文件预览
Oct 22 Javascript
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
杏林同学录(五)
2006/10/09 PHP
php5数字型字符串加解密代码
2008/04/24 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php上传文件问题汇总
2015/01/30 PHP
php数据访问之增删改查操作
2016/05/09 PHP
PHP简单日历实现方法
2016/07/20 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
python多进程控制学习小结
2018/10/31 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
通信工程毕业生自荐信
2013/11/01 职场文书
婚前协议书范本
2014/10/27 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
js判断两个数组相等的5种方法
2022/05/06 Javascript