最近接到领导的任务，要给外面的学生上几节前端课，备课的时候准备了一些小项目，在此记录一下。
以下是爱奇艺首页的一个导航栏，用原生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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容