JavaScript实现仿百度风云榜排行榜
JavaScript实现仿百度风云榜排行榜
html:
<div id="wrap"> <ul class="nav clearfix"> <li>电影</li> <li>电视剧</li> </ul> <div class="content-wrap"> <p class="info"><span class="level">排名</span><span class="keywords">关键词</span><span class="searchtop">搜索指数</span></p> <ul class="items"> </ul> </div> </div>
css:
<style>
*{
box-sizing:border-box;}
body,ul,li,h3,p{
margin:0;
padding:0;}
span{
font-size:0.875em;
color:#999;}
body{
font:1em "microsoft Yahei";
color:#333;}
li{
list-style:none;}
img{
border:none;
vertical-align:middle;}
h3{
font-weight:normal;}
a{
text-decoration:none;}
.clearfix:after{
content:"";
display:block;
clear:both;}
#wrap{
width:400px;
margin:20px auto;
border:1px solid #ddd;}
.info{
padding:5px 10px;
border-bottom:1px solid #eee;}
.level{
margin-right:10px;}
.searchtop{
float:right;}
.nav li{
float:left;
text-align:center;
line-height:40px;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
cursor:pointer;
color:#666;}
.nav li:hover{
color:#333;}
.nav li:last-child{
border-right:none;}
.nav li.active{
background-color:#DB2162;
color:#fff;
border-color:#BF0A49}
.content-wrap li{
padding:10px;
border-bottom:1px solid #eee;}
.item-head{
font-size:1em;
}
.item-head a{
color:#2464B2;
}
.item-head a:hover{
text-decoration:underline;}
.num{
display:inline-block;
width:18px;
height:18px;
text-align:center;
line-height:18px;
color:#fff;
margin-right:10px;
border-radius:2px;
}
.num.top{
background-color:#F23D7C;
}
.num.normal{
background-color:#ccc;
}
.count{
float:right;
}
.item-info{
display:none;
margin-top:10px;
height:110px;
overflow:hidden;
word-break:break-all;
word-wrap:break-word;}
.item-info img{
float:left;
margin:0 10px 10px 0;
max-width:120px;
max-height:110px;
}
.item-info p{
font-size:0.875em;
color:#666;
line-height:1.5;
}
</style>javascript:
<script>
// 1.模拟数据（后台获取）
var data = [
{
'num':[1,2,3,4,5,6,7,8,9,10],
'title':['环太平洋：雷霆再起','西游记女儿国','复仇者联盟','白鹿原','银魂','天生一对','钢铁侠3','三体','天黑请闭眼','星球大战8'],
'count':[47423,45818,36925,34983,30202,25357,24797,24606,23992,23627],
'url':[
'images/movie/1.jpg',
'images/movie/2.jpg',
'images/movie/3.jpg',
'images/movie/4.jpg',
'images/movie/5.jpg',
'images/movie/6.jpg',
'images/movie/7.jpg',
'images/movie/8.jpg',
'images/movie/9.jpg',
'images/movie/10.jpg'
],
'info':[
'《环太平洋：雷霆再起》是斯蒂文·S·迪奈特执导，约翰·波耶加、斯科特·伊斯特伍德、景甜、卡莉·史派妮、菊地凛子、伯恩·戈曼、亚德里亚·霍纳、张晋、查理·戴、黄恺杰、吉丽、蓝盈莹、于小…',
'《西游记女儿国》是星皓影业有限公司出品，由郑保瑞执导，郭富城、冯绍峰、赵丽颖、小沈阳、罗仲谦领衔主演，林志玲、梁咏琪、刘涛、苑琼丹、潘斌龙、施诗出演的喜剧魔幻片。该片讲述了…',
'《复仇者联盟》（Marvel's The Avengers）是由乔斯·韦登执导的动作科幻电影，小罗伯特·唐尼、克里斯·埃文斯、斯嘉丽·约翰逊、克里斯·海姆斯沃斯等主演出。主要讲述的是“复…',
'《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…',
'《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…',
'《天生一对》（The Parent Trap）是美国1998年出品的家庭喜剧电影，根据伊利奇·卡斯特纳《两个小洛特》改编，由南希·迈耶斯执导，林赛·罗韩、丹尼斯·奎德、娜塔莎·理查德森等主演。影片…',
'《钢铁侠3》是《钢铁侠》系列电影第三部，是由美国漫威影业公司出品的科幻动作电影，由沙恩·布莱克执导，小罗伯特·唐尼、格温妮丝·帕特洛、唐·钱德尔、盖·皮尔斯联合主演。该片于2013年5…',
'《三体》是中国游族影业出品的科幻电影，由张番番执导，冯绍峰、张静初、吴刚、唐嫣、杜淳、张翰等主演。该片根据中国科幻作家刘慈欣同名小说改编，讲述了在红岸基地人类文明初次向宇宙发出…',
'《天黑请闭眼》是由阿甘执导，吴倩莲、李小冉、张耀扬等人主演的一部惊悚影片。于2004年4月1日在中国大陆上映。影片以几个朋友在酒吧中玩杀人游戏开始，讲述了在死亡面前，几位好友之间…',
'《星球大战：最后的绝地武士》是《星球大战》系列第八部，是由美国卢卡斯电影有限公司出品的科幻动作片，由莱恩·约翰逊执导，黛茜·雷德利、约翰·波耶加、奥斯卡·伊萨克、亚当·德赖弗、马克·…']
},
{
'num':[1,2,3,4,5,6,7,8,9],
'title':['如懿传','延禧攻略','白鹿原','香蜜沉沉烬如霜','夜天子','再创世纪','周六夜现场','天黑请闭眼','沙海'],
'count':[47423,45818,36925,34983,30202,25357,24797,24606,23992,23627],
'url':['images/tv/1.jpg','images/tv/2.jpg','images/tv/3.jpg','images/tv/4.jpg','images/tv/5.jpg','images/tv/6.jpg','images/tv/7.jpg','images/tv/8.jpg','images/tv/9.jpg'],
'info':['《环太平洋：雷霆再起》是斯蒂文·S·迪奈特执导，约翰·波耶加、斯科特·伊斯特伍德、景甜、卡莉·史派妮、菊地凛子、伯恩·戈曼、亚德里亚·霍纳、张晋、查理·戴、黄恺杰、吉丽、蓝盈莹、于小…','《西游记女儿国》是星皓影业有限公司出品，由郑保瑞执导，郭富城、冯绍峰、赵丽颖、小沈阳、罗仲谦领衔主演，林志玲、梁咏琪、刘涛、苑琼丹、潘斌龙、施诗出演的喜剧魔幻片。该片讲述了…','《复仇者联盟》（Marvel's The Avengers）是由乔斯·韦登执导的动作科幻电影，小罗伯特·唐尼、克里斯·埃文斯、斯嘉丽·约翰逊、克里斯·海姆斯沃斯等主演出。主要讲述的是“复…','《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…','《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…','《天生一对》（The Parent Trap）是美国1998年出品的家庭喜剧电影，根据伊利奇·卡斯特纳《两个小洛特》改编，由南希·迈耶斯执导，林赛·罗韩、丹尼斯·奎德、娜塔莎·理查德森等主演。影片…','《钢铁侠3》是《钢铁侠》系列电影第三部，是由美国漫威影业公司出品的科幻动作电影，由沙恩·布莱克执导，小罗伯特·唐尼、格温妮丝·帕特洛、唐·钱德尔、盖·皮尔斯联合主演。该片于2013年5…','《三体》是中国游族影业出品的科幻电影，由张番番执导，冯绍峰、张静初、吴刚、唐嫣、杜淳、张翰等主演。该片根据中国科幻作家刘慈欣同名小说改编，讲述了在红岸基地人类文明初次向宇宙发出…','《天黑请闭眼》是由阿甘执导，吴倩莲、李小冉、张耀扬等人主演的一部惊悚影片。于2004年4月1日在中国大陆上映。影片以几个朋友在酒吧中玩杀人游戏开始，讲述了在死亡面前，几位好友之间…','《星球大战：最后的绝地武士》是《星球大战》系列第八部，是由美国卢卡斯电影有限公司出品的科幻动作片，由莱恩·约翰逊执导，黛茜·雷德利、约翰·波耶加、奥斯卡·伊萨克、亚当·德赖弗、马克·…']
}
];
// 2.抓取元素
var oWrap = document.querySelector('#wrap');
var oNav = oWrap.querySelector('.nav');
var aLi = oNav.getElementsByTagName('li')
console.log(oWrap,oNav,aLi)
var oUl = oWrap.querySelector('.items')
var aList = oUl.getElementsByTagName('li')
console.log(oUl,aList)
var aItems = oUl.getElementsByClassName('item-info');
console.log(aItems)
// 3. 定义初始化变量
var navNum = 0;
var itemNum = 0;
var str = '';
// tab栏 的 索引是0的这一项，处于高亮显示状态，也就是给它添加一个active的类去修饰它
aLi[navNum].className = 'active';
// 调用函数--动态生成li --- 生成 <ul class="items"> 这个里面的li
fnTab();
// 循环遍历导航li
for(var i=0; i<aLi.length; i++){
// 1. 给当前的li自定义一个属性 叫index，并且 把 索引 i 赋值 给 index 去用
aLi[i].index = i;
// 2.设置当前li的宽度
aLi[i].style.width = 100/aLi.length + '%';
aLi[i].onmouseover = function(){
// (1). 把 我自己身上的 自定义的属性index上的值，赋值给 navNum 这个变量去使用。
navNum = this.index;
// (2). 遍历导航处 所有的li，一把 将他们身上的样式全部去掉
for(var j=0; j<aLi.length; j++){
aLi[j].className = ''
}
// (3). 然后给当前的导航处的li，添加高亮显示
// console.log(this)
this.className = 'active';
// (4). 调用执行 动态生成li的函数
fnTab()
}
}
// 动态生成li
function fnTab(){
console.log(data[navNum].num.length)
str = '';
for(var i=0; i<data[navNum].num.length; i++){
if(i<3){
str += `
<li>
<h3 class="item-head">
<span class="num top">${data[navNum].num[i]}</span>
<a href="">${data[navNum].title[i]}</a>
<span class="count">${data[navNum].count[i]}</span>
</h3>
<div class="item-info">
<a href="">
<img src="${data[navNum].url[i]}" alt="">
</a>
<p>
${data[navNum].info[i]}
</p>
</div>
</li>
`;
}else{
str += `
<li>
<h3 class="item-head">
<span class="num normal">${data[navNum].num[i]}</span>
<a href="">${data[navNum].title[i]}</a>
<span class="count">${data[navNum].count[i]}</span>
</h3>
<div class="item-info">
<a href="">
<img src="${data[navNum].url[i]}" alt="">
</a>
<p>
${data[navNum].info[i]}
</p>
</div>
</li>
`;
}
}
// console.log(str)
// 把 data中的 电影的数据 全部放置到 指定的ul列表中
oUl.innerHTML= str;
// 把 li项目中的 第一项展开 显示
aItems[itemNum].style.display = 'block';
// 鼠标移入 当前项展开，其他项隐藏
for(var i=0; i<aList.length; i++){
aList[i].index = i;
aList[i].onmouseover = function(){
console.log(this.index)
//1.遍历所有的li列表项
for(var j=0; j<aList.length; j++){
// 不是让外层li隐藏，是让 li里面的类名叫.item-info 这个div隐藏
aItems[j].style.display = 'none';
}
// 2. 让当前的li列表项 里面的 .item-info 这个div展开
aItems[this.index].style.display = 'block';
}
}
}
</script>
吐槽一下
还没有留言，还不快点抢沙发？