用原生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中window.confirm的行为
Oct 21 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
javaScript中的空值和假值
Dec 18 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
python访问sqlserver示例
2014/02/10 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
基于python的字节编译详解
2017/09/20 Python
Python装饰器用法实例总结
2018/02/07 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Python可以用来做什么
2020/11/23 Python
python urllib和urllib3知识点总结
2021/02/08 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
怎样写留学自荐信
2013/11/11 职场文书
2014全国两会心得体会
2014/03/17 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers