用原生JS实现爱奇艺首页导航栏
以下是爱奇艺首页的一个导航栏，用原生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>
用原生JS实现爱奇艺首页导航栏的更多相关文章
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图（二）之SuperIndicator源码分析
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...
- 爬虫必看，每日JS逆向之爱奇艺密码加密，今天你练了吗？
友情提示:优先在公众号更新,在博客园更新较慢,有兴趣的关注一下知识图谱与大数据公众号,本次目标是抠出爱奇艺passwd加密JS代码,如果你看到了这一篇,说明你对JS逆向感兴趣,如果是初学者,那不妨再看 ...
- casperjs 抓取爱奇艺高清视频
CasperJS 是一个开源的导航脚本和测试工具,使用 JavaScript 基于 PhantomJS 编写,用于测试 Web 应用功能,Phantom JS是一个服务器端的 JavaScript A ...
- 动态获取爱奇艺上传视频mp4格式url地址
有时候,在工作中有些客户需要用到视频,我们大家都知道视频是非常的耗费流量的,因此,如果因为项目要求客户单独买台视频服务器是非常划不来的.那么将视频上传到优酷,爱奇艺等视频网站来托管那是一件很好的解决方 ...
- 爱奇艺技术分享：爱奇艺Android客户端启动速度优化实践总结
本文由爱奇艺技术团队原创分享,原题<爱奇艺Android客户端启动优化与分析>. 1.引言 互联网领域里有个八秒定律,如果网页打开时间超过8秒,便会有超过70%的用户放弃等待,对Andro ...
- 使用selenium 多线程爬取爱奇艺电影信息
使用selenium 多线程爬取爱奇艺电影信息 转载请注明出处. 爬取目标:每个电影的评分.名称.时长.主演.和类型 爬取思路: 源文件:(有注释) from selenium import webd ...
- android银行卡匹配、详情展开动画、仿爱奇艺视频拖拽、扫码识别手机号等源码
Android精选源码 android实现银行卡匹配信息源码 android实现可以展开查看详情的卡片 下拉刷新,上拉加载,侧滑显示菜单等效果RefreshSwipeRecyclerview andr ...
- 爱奇艺直播 - 春晚直播业务API架构
小结: 1.服务熔断策略 在网关服务中经常会对后端不同api接口做服务聚合,比如A服务 -> B服务 -> C服务 ,如果C服务出现问题,那么在调用C服务之前需要做熔断.而在设计熔断器的时 ...
随机推荐
- 线程同步Lock锁
Lock接口历史 java1.5版本之前只有synchronized一种锁,lock是java1.5版本之后提供的接口.lock接口与synchronized接口功能相同,但是需要手动获取锁和释放锁. ...
- MOOC（7）- case依赖、读取json配置文件进行多个接口请求-执行测试用例（16）
执行测试用例 # -*- coding: utf-8 -*- # @Time : 2020/2/12 22:56 # @File : run_test_16.py # @Author: Hero Li ...
- 微软推出精简版Windows10Lean系统意欲何为？
提起Windows系统,自然无须多言都知道它的重要性.在经历了Windows Vista的失败. Windows 7的成功.Windows 8的平庸和Windows 10的复兴之后,微软算是积累下了大 ...
- 我是青年你是良品－魅蓝NOTE 2
2" title="我是青年你是良品-魅蓝NOTE 2"> 明天魅蓝即将迎来自己的新品发布会.选择儿童节的第二天后最喜爱的手机品牌.让其成为真正青年的良品. 在 ...
- Yuur persistent XSS
XSS发生在评论处/帖子正文处 index.php:37-38行 $sql="insert into topic set tid='$tid',title='$title',nickname ...
- Gnome Ubuntu16安装Nvidia显卡396驱动，CUDA9.2以及cudnn9.2
深度学习环境配置,安装Nvidia显卡驱动,CUDA以及cudnn OS:ubuntu 16.04;driver: nvidia 396;CUDA: 9.2cudnn: 9.2 卸载原有Nvidia驱 ...
- 【转载】checkbox实现全选/取消全选
比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...
- selenium+requests进行cookies保存读取操作
看这篇文章之前大家可以先看下我的上一篇文章:cookies详解 本篇我们就针对上一篇来说一下cookies的基本应用 使用selenium模拟登陆百度 from selenium import web ...
- TypeScript声明文件
为什么需要声明? 声明的本质是告知编译器一个标识符的类型信息.同时,在使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全.接口提示等功能. 声明在TypeScript中至关重要,只有通过 ...
- 从头认识js-js中的对象
什么是对象? ECMA-262中把对象定义为:“无序属性的集合,其属性可以包含基本值,对象或者函数”.严格来讲,对象是一组没有特定顺序的值.对象的每个属性或方法·都有一个名字,而每个名字都映射到一个值 ...