用原生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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Fullpage.js固定导航栏-实现定位导航栏
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工
-
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
最近利用vue第三方UI MuseUI开发webapp,然后在导航栏这里出现了问题,我需要在导航栏上的几个路由上显示底部导航栏,在其他路由上不显示,就这个问题,MuseUI的底部导航栏直接加载在app.vue里面,会每个页面都有导航栏,所以这种方式不可行,后来我真的使出了浑身解数,去MuseUI作者GitHub上面提问,无果,去segmentfault上面提问,无果,去vue官方群提问,无果,在提问之前,我都是经过一番搜索,思考的,但是这些都让我崩溃了.可能出错的地方从路由URL,museUI的
-
原生JS实现 MUI导航栏透明渐变效果
mui内置有H5版本的透明渐变导航控件,教程参考mui官网:透明渐变导航是一种解决滚动条通顶的变通方案,相比双webview,具有更高的性能和更好的动画效果: 下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果,具体内容详情如下所示: 首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器 css代码 body,p,h1{margin: 0;} .module-layer{ width: 100%; positio
-
JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
JS 实现导航栏悬停效果
JS-实现导航栏悬停 先布个局: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <met
-
JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.
-
JavaScript满天星导航栏实现方法
说明 分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧. 解释 实现这个效果,需要掌握的知识不用很多,知道简单的CSS,会用JS 获取元素, 能绑定事件基本就足够了. 好的,我们直接来看代码,注释已经写的很详细了,不想看有注释的,点这里点击预览. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> b
-
JS滚动到指定位置导航栏固定顶部
最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0
-
用原生JS实现爱奇艺首页导航栏代码实例
最近接到领导的任务,要给外面的学生上几节前端课,备课的时候准备了一些小项目,在此记录一下. 以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> <meta charset="utf-8"> <style type="text/css"> * { padding: 0; margin: 0; } .wrap
-
Python爬虫爬取爱奇艺电影片库首页的实例代码
上篇文章给大家介绍了Python爬取爱奇艺电影信息代码实例 感兴趣的朋友点击查看下. 今天给大家介绍Python爬虫爬取爱奇艺电影片库首页,下面是实例代码,参考下: import time import traceback import requests from lxml import etree import re from bs4 import BeautifulSoup from lxml.html.diff import end_tag import json import pymys
-
JS逆向之爱奇艺滑块加密的实现
目录 前言 一.页面分析 二.分析 1.分裂图片还原 2.动态AESKey,HMacKey 3.cryptSrcData加密 4.返回数据解密 总结 文章仅供参考,禁止用于非法途径 前言 目标网站:aHR0cHM6Ly93d3cuaXFpeWkuY29tL2lmcmFtZS9sb2dpbnJlZz92ZXI9MQ== 一.页面分析 切换账密登入,抓包,登入接口有个passsword,rsa加密的 然后多点几次就会出现验证码 二.分析 1.分裂图片还原 下个canvas断点即可知道如何还原 2.动
-
使用Python获取爱奇艺电视剧弹幕数据的示例代码
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于数据STUDIO,作者龙哥带你飞 Python分析抖音用户行为数据视频讲解地址 https://www.bilibili.com/video/BV1yp4y1q7ZC/ 数据获取是数据分析中的重要的一步,数据获取的途径多种多样,在这个信息爆炸的时代,数据获取的代价也是越来越小.因此如此,仍然有很多小伙伴们无法如何获取有用信息.此处以最近的热播排行榜第一名的<流金岁月>为例,手把手
-
android仿爱奇艺加载动画实例
本篇文章介绍了android仿爱奇艺加载动画实例,具体代码如下: 效果图: 用到的知识点: Path ValueAnimator 如果对Path和ValueAnimator还不熟悉推荐去看这几个大神的Blog自定义view的目前讲的最适合我的文章 ,自定义view的详细教程和实践,这个也是教程和实践,感谢他们的付出!(希望大家可以认真看完,可以得到很多启发). 拆解动画 一个圆先顺时针的慢慢画出来(圆不是一个闭合的圆) 这一步是一个组合动画,圆慢慢的消失,同时三角形顺时针旋转 这里的难点主要就是
-
基于Python爬取爱奇艺资源过程解析
像iqiyi这种视频网站,现在下载视频都需要下载相应的客户端.那么如何不用下载客户端,直接下载非vip视频? 选择你想要爬取的内容 该安装的程序以及运行环境都配置好 下面这段代码就是我在爱奇艺里搜素"英文名",然后出来的视频,共有20页,那么我们便从第一页开始,解析网页,然后分析 分析每一页网址,找出规律就可以直接得到所有页面 然后根据每一个视频的URL的标签,如'class' 'div' 'href'......通过bs4库进行爬取 而其他的信息则是直接循环所爬取到的URL,在每一个
-
Python爬取爱奇艺电影信息代码实例
这篇文章主要介绍了Python爬取爱奇艺电影信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一,使用库 1.requests 2.re 3.json 二,抓取html文件 def get_page(url): response = requests.get(url) if response.status_code == 200: return response.text return None 三,解析html文件 我们需要的电影信
-
python实现爱奇艺登陆密码RSA加密的方法示例详解
前言 通过Python实现对大麦网近期全国演唱会数据进行爬取,通过分析,我们发现大麦网属于Python爬虫策略中"中等型"难度网站,演唱会数据封装在json文件中.因此,我们简单的通过requests.json就可以将数据爬取出来,后期通过pandas进行数据筛选并保存至Excel文件中. 1.目标网站分析 检查一下看xhr中有没有我们需要的数据. 很好,就在xhr中用json封装了数据. 2.构造相应的Request URL request url中只有一个参数变化,那就是"
-
教你怎么用python爬取爱奇艺热门电影
一.首先我们要找到目标 找到目标先分析一下网页(url:https://list.iqiyi.com/www/1/-------------11-1-1-iqiyi–.html),很幸运这个只有一个网页,不需要翻页. 二.F12查看网页源代码 找到目标,分析如何获取需要的数据.找到href与电影名称 三.进行代码实现,获取想要资源. ''' 爬取爱奇艺电影与地址路径 操作步骤 1,获取到url内容 2,css选择其选择内容 3,保存自己需要数据 ''' #导入爬虫需要的包 import requ
-
Python趣味爬虫之爬取爱奇艺热门电影
一.首先我们要找到目标 找到目标先分析一下网页很幸运这个只有一个网页,不需要翻页. 二.F12查看网页源代码 找到目标,分析如何获取需要的数据.找到href与电影名称 三.进行代码实现,获取想要资源. ''' 操作步骤 1,获取到url内容 2,css选择其选择内容 3,保存自己需要数据 ''' #导入爬虫需要的包 import requests from bs4 import BeautifulSoup #requests与BeautifulSoup用来解析网页的 import time #设