用原生JS實現(xiàn)愛奇藝首頁導(dǎo)航欄代碼實例
更新時間：2019年09月19日 14:50:01 作者：袁藝明
這篇文章主要介紹了用原生JS實現(xiàn)愛奇藝首頁導(dǎo)航欄代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
最近接到領(lǐng)導(dǎo)的任務(wù)，要給外面的學(xué)生上幾節(jié)前端課，備課的時候準(zhǔn)備了一些小項目，在此記錄一下。
以下是愛奇藝首頁的一個導(dǎo)航欄，用原生js寫的，靜態(tài)頁面效果如下：
代碼如下：
<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: '做家務(wù)',
desc: '魏大勛花錢做音樂',
url: '4.jpg'
},
{
title: '掃毒2',
desc: '劉德華硬戰(zhàn)古天樂',
url: '5.jpg'
},
{
title: '加油',
desc: '郝澤寧隔屏告白福子',
url: '6.jpg'
},
{
title: '小歡喜',
desc: '宋倩喬衛(wèi)東重歸于好',
url: '7.jpg'
},
{
title: '謀愛上癮',
desc: '契約夫婦遇感情危機',
url: '8.jpg'
},
{
title: '此食此客',
desc: '啤酒花蛤夏日絕配',
url: '9.jpg'
},
{
title: '愛奇藝特別策劃',
desc: '我們的70年',
url: '10.jpg'
}
]; // 需要展示的數(shù)據(jù)，通常從后端獲取
let curIndex = 0; // 當(dāng)前索引
let isAutoMove = true; // 是否可以自動改變圖片
let interval = 1000; // 自動輪播的間隔時間
// 封裝函數(shù)：生成新的標(biāo)簽
function createTag(tag) {
return document.createElement(tag);
}
// 封裝函數(shù)：生成文本節(jié)點
function createText(text) {
return document.createTextNode(text);
}
// 封裝函數(shù)：初始化列表
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);
}
}
// 鼠標(biāo)hover右側(cè)欄時改變背景圖片及文字樣式
function addHoverListener(trigger, index) {
trigger.addEventListener('mouseenter', function () {
curIndex = index; // 保存當(dāng)前索引
changeImage();
activeText();
});
}
// 根據(jù)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 + "')";
}
// 根據(jù)index改變右側(cè)激活文本的樣式
function activeText() {
let activeObj = document.getElementsByClassName('active')[0];
let li = document.getElementsByTagName('li')[curIndex];
if (activeObj) {
activeObj.classList.remove('active');
}
li.classList.add('active');
}
// 鼠標(biāo)移入移出wrap區(qū)域時響應(yīng)關(guān)閉、開啟自動輪播
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
簡單了解Javscript中兄弟ifream的方法調(diào)用
這篇文章主要介紹了簡單了解Javscript中兄弟ifream的方法調(diào)用文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JS解析XML文件和XML字符串詳解，推薦給大家，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了JavaScript作用域與作用域鏈優(yōu)化方式,圍繞主題展開JavaScript作用域以及作用域鏈的那些事情，以及針對它們的一些我們在代碼中優(yōu)化小技巧，需要的朋友可以參考一下2022-07-07
這篇文章主要介紹了Ajax請求時無法重定向的問題解決代碼詳解，當(dāng)使用Ajax請求時，如果后臺進行重定向到其他頁面時是無法成功的，只能在瀏覽器地址欄輸入才能夠?qū)崿F(xiàn)重定向。下面我們來看看解決方法吧2019-06-06
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)粒子流動效果,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以參考一下2023-09-09
這篇文章主要為大家詳細介紹了canvas繪制刮刮卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
使用webpack將ES6轉(zhuǎn)化ES5的實現(xiàn)方法
這篇文章主要介紹了使用webpack將ES6轉(zhuǎn)化ES5的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
兼容主流瀏覽器的 iframe 自適應(yīng)高度，很實用的，具體的js腳本如下，感興趣的朋友可不要錯過2014-01-01
Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能完整示例
這篇文章主要介紹了Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能,結(jié)合完整實例形式分析了Bootstrap前端登錄頁面帶驗證碼界面布局與功能實現(xiàn)相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了document.cookie 使用,主要包括cookie設(shè)置，修改cookie值及獲取cookie值的相關(guān)知識，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-06-06