用原生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效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
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
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
python基础练习之几个简单的游戏
2017/11/10 Python
python让列表倒序输出的实例
2018/06/25 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
python Scrapy框架原理解析
2021/01/04 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
心得体会开头
2014/01/01 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
科级干部考察材料
2014/02/15 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
文明城市创建标语
2014/06/16 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2014年采购部工作总结
2014/11/20 职场文书
先进工作者申报材料
2014/12/23 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS