这个仿百度风云排行榜案例的原理和选项卡套选项卡的案例原理是一样的。

做JavaScript案例的基本步骤都是这样：

1、先完成一个模块的效果。

2、再封装成函数。

3、再通过调用函数传参的方式改变数据。

4、所有数据都是通过数据对象生成。

具体效果点击查看。

注意：代码更新了，但是下载的案例没有更新，可以用页面上的代码代替下载的代码。

一、html代码

<div id="wrap">
        <ul class="title-wrap clearfix">
        </ul>
        <div class="content-wrap">
            <p class="info"><span class="level">排名</span><span class="keywords">关键词</span><span class="count">指数</span>
            </p>
            <ul>
            </ul>
        </div>
    </div>

二、css代码

*{
    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;
    }

三、js代码

<script>
        // 找对象
        var oWrap = document.querySelector(".title-wrap");
        var oLiTitle = oWrap.getElementsByTagName("li");
        var oContent = document.querySelector(".content-wrap");
        var oUl = oContent.querySelector("ul");
        var oDivShow = document.getElementsByClassName("item-info");
        var oContentTitle = document.getElementsByClassName("title");



        // 初始化数据
        var data = [{
                'cata': "电影",
                '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&#39;s The Avengers）是由乔斯·韦登执导的动作科幻电影，小罗伯特·唐尼、克里斯·埃文斯、斯嘉丽·约翰逊、克里斯·海姆斯沃斯等主演出。主要讲述的是“复…',
                    '《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…',
                    '《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…',
                    '《天生一对》（The Parent Trap）是美国1998年出品的家庭喜剧电影，根据伊利奇·卡斯特纳《两个小洛特》改编，由南希·迈耶斯执导，林赛·罗韩、丹尼斯·奎德、娜塔莎·理查德森等主演。影片…',
                    '《钢铁侠3》是《钢铁侠》系列电影第三部，是由美国漫威影业公司出品的科幻动作电影，由沙恩·布莱克执导，小罗伯特·唐尼、格温妮丝·帕特洛、唐·钱德尔、盖·皮尔斯联合主演。该片于2013年5…',
                    '《三体》是中国游族影业出品的科幻电影，由张番番执导，冯绍峰、张静初、吴刚、唐嫣、杜淳、张翰等主演。该片根据中国科幻作家刘慈欣同名小说改编，讲述了在红岸基地人类文明初次向宇宙发出…',
                    '《天黑请闭眼》是由阿甘执导，吴倩莲、李小冉、张耀扬等人主演的一部惊悚影片。于2004年4月1日在中国大陆上映。影片以几个朋友在酒吧中玩杀人游戏开始，讲述了在死亡面前，几位好友之间…',
                    '《星球大战：最后的绝地武士》是《星球大战》系列第八部，是由美国卢卡斯电影有限公司出品的科幻动作片，由莱恩·约翰逊执导，黛茜·雷德利、约翰·波耶加、奥斯卡·伊萨克、亚当·德赖弗、马克·…'
                ]
            },
            {
                'cata': "电视剧",
                '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&#39;s The Avengers）是由乔斯·韦登执导的动作科幻电影，小罗伯特·唐尼、克里斯·埃文斯、斯嘉丽·约翰逊、克里斯·海姆斯沃斯等主演出。主要讲述的是“复…',
                    '《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…',
                    '《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…',
                    '《天生一对》（The Parent Trap）是美国1998年出品的家庭喜剧电影，根据伊利奇·卡斯特纳《两个小洛特》改编，由南希·迈耶斯执导，林赛·罗韩、丹尼斯·奎德、娜塔莎·理查德森等主演。影片…',
                    '《钢铁侠3》是《钢铁侠》系列电影第三部，是由美国漫威影业公司出品的科幻动作电影，由沙恩·布莱克执导，小罗伯特·唐尼、格温妮丝·帕特洛、唐·钱德尔、盖·皮尔斯联合主演。该片于2013年5…',
                    '《三体》是中国游族影业出品的科幻电影，由张番番执导，冯绍峰、张静初、吴刚、唐嫣、杜淳、张翰等主演。该片根据中国科幻作家刘慈欣同名小说改编，讲述了在红岸基地人类文明初次向宇宙发出…',
                    '《天黑请闭眼》是由阿甘执导，吴倩莲、李小冉、张耀扬等人主演的一部惊悚影片。于2004年4月1日在中国大陆上映。影片以几个朋友在酒吧中玩杀人游戏开始，讲述了在死亡面前，几位好友之间…',
                    '《星球大战：最后的绝地武士》是《星球大战》系列第八部，是由美国卢卡斯电影有限公司出品的科幻动作片，由莱恩·约翰逊执导，黛茜·雷德利、约翰·波耶加、奥斯卡·伊萨克、亚当·德赖弗、马克·…'
                ]
            },

        ];

        // 初始化头部选项
        var len = data.length;
        data.forEach(function (item) {
            oWrap.innerHTML += "<li>" + item.cata + "</li>";

        })
        Array.from(oLiTitle).forEach(function (item) {
            item.style.width = 100 / len + "%";
        })

        var num = 0;
        var oldTitle = null;
        oLiTitle[num].classList.add("active");
        oldTitle = oLiTitle[num];

        // 初始化下面的结构
        tab(0);


        // 鼠标经过切换选项卡
        Array.from(oLiTitle).forEach(function (item, index) {
            item.onmouseover = function () {
                oldTitle.classList.remove("active");
                item.classList.add("active");
                oldTitle = item;
                // 每次调用之前先清空数据
                oUl.innerHTML = "";
                tab(index);
            }
        })





        // 初始化下面
        function tab(num) {
            var title = data[num].title;
            var url = data[num].url;
            var count = data[num].count;
            var info = data[num].info;
            title.forEach(function (item, index) {
                if (index < 3) {
                    oUl.innerHTML += "<li><h3 class='title'><span class='num top'>" + (index + 1) +
                        "</span><a href='#'>" + item + "</a><span class='zhishu'>" + count[index] +
                        "</span></h3><div class='item-info'><a href='#'><img src='" + url[index] + "'></a><p>" + info[
                            index] + "</p></div></li>"
                } else {
                    oUl.innerHTML += "<li><h3 class='title'><span class='num normal'>" + (index + 1) +
                        "</span><a href='#'>" + item + "</a><span class='zhishu'>" + count[index] +
                        "</span></h3><div class='item-info'><a href='#'><img src='" + url[index] + "'></a><p>" + info[
                            index] + "</p></div></li>"
                }
            })
            oDivShow[0].style.display = "block";

            // 鼠标经过切换显示和隐藏
            Array.from(oContentTitle).forEach(function (item, index) {
                item.onmouseover = function () {
                    for (var i = 0; i < oDivShow.length; i++) {
                        oDivShow[i].style.display = "none";
                    }
                    oDivShow[index].style.display = "block";
                }

            })
        }
    </script>

案例源代码下载地址：

链接: https://pan.baidu.com/s/1JqJLZNq78VWHg4i_Q0v9TA 提取码: cy5p