用原生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:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
js实现延迟加载的方法
Jun 24 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
php格式化时间戳
2016/12/17 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
对于Python的框架中一些会话程序的管理
2015/04/20 Python
解析Python中while true的使用
2015/10/13 Python
python的变量与赋值详细分析
2017/11/08 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
优秀教师自我评价范文
2014/09/27 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
酒店前台辞职书
2015/02/26 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
用Python实现屏幕截图详解
2022/01/22 Python