用原生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服务之前需要做熔断.而在设计熔断器的时 ...
随机推荐
- Spring_IOC
我们都知道,如果要在不同的类中使用同一个对象一般我们我们都需要在每一个类中都去new一个新的对象,也有的人会为这个对象写一个工具类,无论哪种方法都需要我们自己去创建,不但繁琐,而且相当耗损资源,所以才 ...
- [LC] 91. Decode Ways
A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...
- Skipping MapperFactoryBean with name 'sysUserMapper' and 'com.buding.system.mapper.SysUserMapper' mapperInterface. Bean already defined with the same name!
前几天整体看了一下SpringBoot的简介,觉得看不如自己动手做,于是动手做一个简单的用户管理.启动的时候遇到了Skipping MapperFactoryBean with name 'sysUs ...
- JavaScript学习总结（七）Ajax和Http状态字
转自:http://segmentfault.com/a/1190000000691919 Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里 ...
- Web前端性能
6.1前端性能示例 性能测试工具: Apache Benchmark(ab)得到的响应时间仅为从请求发出开始到接收到HTML的最后一个字节所消耗的全部时间.ab命令行如下: ab -c [并发用户数] ...
- jenkins使用（1）
术语:构建一次job指的是执行一次任务 注:到了公司,如果需要搭建jenkins环境可以找运维 jenkins使用: 创建视图 常用的两个配置: 新建任务: 可以选择构建后的步骤: 然后保存 图标状态 ...
- 吴裕雄--天生自然 R语言开发学习：时间序列
#-----------------------------------------# # R in Action (2nd ed): Chapter 15 # # Time series # # r ...
- URL与URI与URN的区别与联系
1.什么是URL? 统一资源定位符(或称统一资源定位器/定位地址.URL地址等[1],英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网 ...
- <NOI2002>银河英雄传说の思路
emm并没有什么好说的.毕竟我这个蒟蒻都能yy出来 #include<cstring> #include<cstdio> #include<iostream> #i ...
- connect() failed (111: Connection refused) while connecting to upstream报错处理
新lnmp环境调试项目时,nginx报错如下: 解决: 发现php-fpm.conf是以套接字方式通信,而nginx是以端口方式通信,见下图: 将nginx.conf修改为如下,重新reload即可