用原生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服务之前需要做熔断.而在设计熔断器的时 ...
随机推荐
- PCIe的事务传输层的处理（TLP）
主要从以下几个方面解决: 1.TLP基本的概念: 2.寻址定位与路由导向 3.请求和响应机制 4.虚拟通道机制 5.数据完整性 6.i/o,memory,configuration,message r ...
- 使用zxing生成和解析二维码
二维码: 是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的: 在代码编制上巧妙的利用构成计算机内部逻辑基础的0和1比特流的概念,使用若干个与二进制相对应的几何 ...
- mvn测试常用命令
-Dmaven.test.failure.ignore=true 测试报错忽略 例子: mvn package -DAPP_ENV=dev -Dmaven.test.failure.ignore=t ...
- Spring Dispatcher-servlet.xml配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 使用JS-SDK自定义微信分享效果
前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题,摘要),一开始真是一脸懵逼,在网上搜索了半天之后大概有了方案.值得注意的是一开始搜索到的解决方案全是调用微 ...
- JavaScript深入浅出-闭包
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function (){ var localVal ...
- Web自动化测试平台设计与落地-概览
引言 自动化金字塔-灵魂手绘版 关于Web自动化测试,投入产出比是一个绕不开的话题,对于走到2017年的测试人,这时候可能已经有很多人会想到著名的自动化测试金字塔.它形象地展示了Mike Cohn对自 ...
- es6this箭头函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 < ...
- HDU——算法练习1000 1089-1096
全篇都是讲数字之间的运算的: 由上自下难度逐渐升级 ,没耐心者建议一拉到底: 1000: Problem Description Calculate A + B. Input Each line ...
- C++扬帆远航——13（个人所得税计算器）
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:shui.cpp * 作者:常轩 * 微信公众号:Worldhe ...