微客导航 » 文章资讯 » 用原生JS实现爱奇艺首页导航栏代码实例

用原生JS实现爱奇艺首页导航栏代码实例

2023-08-13 22:12:04 184

最近接到领导的任务，要给外面的学生上几节前端课，备课的时候准备了一些小项目，在此记录一下。

以下是爱奇艺首页的一个导航栏，用原生js写的，静态页面效果如下：

代码如下：



爱奇艺


*{
padding:0;
margin:0;
}
.wrap{
height:520px;
background-color:#000;
width:100%;
}
.wrap.img-wrap{
height:100%;
margin:0auto;
background-image:url('1.jpg');
background-repeat:no-repeat;
background-position:50%50%;
background-size:auto100%;
position:relative;
}
/*媒体查询*/
@mediascreenand(max-width:2000px){
.wrap.img-wrap.item-list{
right:10%;
}
}
@mediascreenand(max-width:1600px){
.wrap.img-wrap.item-list{
right:8%;
}
}
@mediascreenand(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:10px0;
}
.wrap.img-wrap.item-listli{
padding:015px;
}
.wrap.img-wrap.item-listli.active{
/*background-color:-webkit-linear-gradient(left,rgba(0,0,0,.3),rgba(0,0,0,0.1));*/
background:linear-gradient(toright,rgba(0,0,0,.5),rgba(0,0,0,0));
cursor:pointer;
}
.wrap.img-wrap.item-listlispan{
line-height:40px;
color:#eee;
font-size:16px;
}
.wrap.img-wrap.item-listli.activespan{
color:#00be06;
display:block;
}
.wrap.img-wrap.item-listli.activespan:nth-child(1){
font-size:24px;
transition:font-size0.2s;
}
.wrap.img-wrap.item-listli.activespan:nth-child(2){
display:none;
}

letitems=[ { 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' } ];//需要展示的数据，通常从后端获取 letcurIndex=0;//当前索引 letisAutoMove=true;//是否可以自动改变图片 letinterval=1000;//自动轮播的间隔时间 //封装函数：生成新的标签 functioncreateTag(tag){ returndocument.createElement(tag); } //封装函数：生成文本节点 functioncreateText(text){ returndocument.createTextNode(text); } //封装函数：初始化列表 functioninitItemList(){ letul=document.getElementsByClassName('item-list')[0]; for(leti=0;i

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

用原生JS实现爱奇艺首页导航栏代码实例

热门推荐

随机推荐