冒险岛官网模拟之五利用PHP+jQuery实现游戏排行榜的制作(连更)

其他 2018-09-14 10:18:52 阅读次数: 0

先看效果:
这里写图片描述

实现后代具体效果是这样的,如果我们直接用CSS+HTML书写的话,代码量是非常巨大的。为了简化我们的代码，所以我们采用从数据库里面获取内容的形式来精简我们的代码。具体流程：

这里写图片描述

在代码中，我们只写了一个li标签，然后通过获取数据库里的数据（得到的是一个数组），将这个数组遍历出来生成对应的li标签盒子。而li标签就包含上图滑动展示出来的所有内容。所以我们的代码里面只需要一个li标签模板就可以实现了。

数据库的格式：

这里写图片描述

注意：在数据库里面放图片的路径，真正的图片则放在硬盘里面。

li标签母版：

<li class="screenPH">
    //排名
      <div class="topSub">1</div>
     //游戏图片
      <img src="game_rank_data/NBA2KOL2.jfif" alt="" class="displayNow">
      //游戏名字
      <i>NBA2K&nbsp;&nbsp;OL2</i>
      <span class="download-h showSpan">
            <a href="#" class="left">
               <i class="iconfont icon_home">&#xe613;</i>
               <em>进入官网</em>
             </a>
             <a href="#" class="right">
               <i class="iconfont icon_download">&#xe69a;</i>
               <em>下载游戏</em></a>
        </span>
  </li>

但是上面的内容都是写死了的，比如：图片信息，游戏的名字游戏的排名等。
所以我们利用php来访问服务器里的数据库，然后在遍历之后更改对应的数据就可以了。

<?php 
            //链接数据库
            $link = mysqli_connect("127.0.0.1","root","root","ershisanqi");

            //书写sql语句 这里是从第1条记录开始查找10条记录后获得的表格
            $sql = " select * from game_rank_data limit 0, 10";
            $res = mysqli_query($link,$sql);
            //将结果转化成关系型数组
            $arr = mysqli_fetch_all($res,1);
            // var_dump($arr);

            //现在遍历数组生成对应的li标签
            for($i=0;$i<count($arr);$i++):
                //下面三行代码,意思是当是第一行的时候,让这些内容显示出来
                $liClassName = ($i==0) ? 'screenPH' : ''; //让li显示
                $imgClassName  = ($i==0) ? 'displayNow' : ''; //让图片显示
                $spanClassName = ($i==0) ? 'showSpan' : ''; //让字体图标显示

        ?>    


        <li class="<?php echo $liClassName  ?>">
            <div class="topSub"><?php echo $arr[$i]['Id']  ?></div>
            <img src="<?php echo $arr[$i]['gameImg']  ?>" alt=""  class='<?php echo $imgClassName  ?>'>
            <i><?php echo $arr[$i]['gameName']  ?></i>
            <span class="download-h <?php echo $spanClassName  ?>">
                <a href="#" class="left">
                    <i class="iconfont icon_home">&#xe613;</i> 
                    <em>进入官网</em>
                </a>
                <a href="#" class="right">
                    <i class="iconfont icon_download">&#xe69a;</i> 
                    <em>下载游戏</em>
                </a>
            </span>
        </li>

        <?php endfor; ?>

HTML+PHP代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="phb.css">
<link rel="stylesheet" href="font_x9lzm8j60xo/iconfont.css">
<script src="jquery-1.12.4.js"></script>
<script src="phb.js"></script>
<body>
<!--网页头部开始-->
<div class="zh-header">
    <div class="zh-header-inner">
        <div class="zh-left">
            <div class="zh-tgplogo">
                <a href="#"></a>
            </div>
            <div class="zh-nba">
                <div id="zh-bigNba"></div>
                <a href="javascript:void(0);"><img src="./images/1036346959555539684153311890023040.jfif" alt=""></a>
            </div>
        </div>
        <div class="zh-right">
            <div class="zh-chsh">
                <a href="#" id="zh-sh"><i></i>成长守护平台</a>
            </div>
            <!--游戏排行榜-->
            <div class="zh-pxb" id="zh-pxb">
                <a href="javascript:void(0);">腾讯游戏排行榜<i id="zh-ph"></i></a>
                <div id="zh-gameRank">
                    <span class="sanjiao"></span>
                    <div class="zh-nGame">
                        <div class="zh-nGameh">
                            <span class="left">新游排行榜</span>
                            <span class="right"><a href="#" class="more">更多 »</a></span>
                        </div>
                        <p>排名&nbsp;&nbsp;&nbsp;&nbsp;游戏</p>
                        <div class="nGameList">
                            <ul>

                                <?php 
                                    //链接数据库
                                    $link = mysqli_connect("127.0.0.1","root","root","ershisanqi");

                                    //书写sql语句 这里是从第1条记录开始查找10条记录后获得的表格
                                    $sql = " select * from game_rank_data limit 0, 10";
                                    $res = mysqli_query($link,$sql);
                                    //将结果转化成关系型数组
                                    $arr = mysqli_fetch_all($res,1);
                                    // var_dump($arr);

                                    //现在遍历数组生成对应的li标签
                                    for($i=0;$i<count($arr);$i++):
                                        //下面三行代码,意思是当是第一行的时候,让这些内容显示出来
                                        $liClassName = ($i==0) ? 'screenPH' : ''; //让li显示
                                        $imgClassName  = ($i==0) ? 'displayNow' : ''; //让图片显示
                                        $spanClassName = ($i==0) ? 'showSpan' : ''; //让字体图标显示

                                ?>    


                                <li class="<?php echo $liClassName  ?>">
                                    <div class="topSub"><?php echo $arr[$i]['Id']  ?></div>
                                    <img src="<?php echo $arr[$i]['gameImg']  ?>" alt=""  class='<?php echo $imgClassName  ?>'>
                                    <i><?php echo $arr[$i]['gameName']  ?></i>
                                    <span class="download-h <?php echo $spanClassName  ?>">
                                        <a href="#" class="left">
                                            <i class="iconfont icon_home">&#xe613;</i> 
                                            <em>进入官网</em>
                                        </a>
                                        <a href="#" class="right">
                                            <i class="iconfont icon_download">&#xe69a;</i> 
                                            <em>下载游戏</em>
                                        </a>
                                    </span>
                                </li>

                                <?php endfor; ?>

                            </ul>
                        </div>
                    </div>
                    <!--热门游戏开始-->
                    <div class="zh-nGame">
                        <div class="zh-nGameh">
                            <span class="left">热门排行榜</span>
                            <span class="right"><a href="#" class="more">更多 »</a></span>
                        </div>
                        <p>排名&nbsp;&nbsp;游戏</p>
                        <div class="nGameList">
                            <ul>
                                <?php 
                                   //书写sql语句 这里是从第10条记录开始查找10条记录后获得的表格
                                   $sql_1 = " select * from game_rank_data limit 10, 10";
                                   $res_1 = mysqli_query($link,$sql_1);
                                   //将结果转化成关系型数组
                                   $arr_1 = mysqli_fetch_all($res_1,1);
                                   // var_dump($arr);

                                   //现在遍历数组生成对应的li标签
                                   for($i=0;$i<count($arr_1);$i++): 
                                    $liClassName = ($i==0) ? 'screenPH' : '';
                                    $imgClassName  = ($i==0) ? 'displayNow' : '';
                                    $spanClassName = ($i==0) ? 'showSpan' : '';
                                ?>
                                <li class="<?php echo $liClassName  ?>">
                                    <div class="topSub"><?php echo $arr_1[$i]['Id'] - 10;  ?></div>
                                    <img src="<?php echo $arr_1[$i]['gameImg']  ?>" alt="" class='<?php echo $imgClassName  ?>' >
                                    <i><?php echo $arr_1[$i]['gameName']  ?></i>
                                    <span class="download-h  <?php echo $spanClassName  ?>">
                                        <a href="#" class="left">
                                            <i class="iconfont icon_home">&#xe613;</i> 
                                            <em>进入官网</em>
                                        </a>
                                        <a href="#" class="right">
                                            <i class="iconfont icon_download">&#xe69a;</i> 
                                            <em>下载游戏</em>
                                        </a>
                                    </span>
                                </li>

                                <?php endfor; ?>

                            </ul>
                        </div>
                    </div>
                    <!--热门游戏结束-->
                    <!--手机游戏开始-->
                    <div id="phoneGame">
                        <div class="zh-nPhoneGame" id="phoneTop">
                            <div class="zh-nGameh">
                                <span class="left">新品手游排行榜</span>
                                <span class="right"><a href="#" class="more">更多 »</a></span>
                            </div>
                            <p>排名&nbsp;&nbsp;游戏</p>
                            <div class="nGameList">
                                <ul id="u1">

                                    <?php 
                                    //书写sql语句 这里是从第20条记录开始查找5条记录后获得的表格
                                    $sql_2 = " select * from game_rank_data limit 20, 5";
                                    $res_2 = mysqli_query($link,$sql_2);
                                    //将结果转化成关系型数组
                                    $arr_2 = mysqli_fetch_all($res_2,1);
                                    // var_dump($arr);

                                    //现在遍历数组生成对应的li标签
                                    for($i=0;$i<count($arr_2);$i++): 
                                        $liClassName = ($i==0) ? 'screenPH' : '';
                                        $imgClassName  = ($i==0) ? 'displayNow' : '';
                                        $spanClassName = ($i==0) ? 'showSpan' : '';
                                    ?>

                                    <li  class="<?php echo $liClassName  ?>">
                                        <div class="topSub"><?php echo $arr_2[$i]['Id'] - 20;  ?></div>
                                        <img src="<?php echo $arr_2[$i]['gameImg']  ?>" alt="" class='<?php echo $imgClassName  ?>' >
                                        <i><?php echo $arr_2[$i]['gameName']  ?></i>
                                        <span class="download-h  <?php echo $spanClassName  ?>">
                                            <a href="#">
                                            <i class="left iconfont icon_home">&#xe613;</i>
                                            </a>
                                            <a href="#">
                                                <i class="mid iconfont icon_home_ios">&#xe600;</i>
                                             </a>
                                             <a href="#">
                                                <i class="right iconfont icon_home_android">&#xe614;</i>
                                            </a>
                                        </span>
                                    </li>

                                    <?php endfor; ?>

                                </ul>
                            </div>
                        </div>
                        <!--手机游戏结束-->
                        <!--热门手游开始-->
                        <div class="zh-nPhoneGame" id="phoneBottom">
                            <div class="zh-nGameh" id="phoneBottomH">
                                <span class="left">热门排行榜</span>
                                <span class="right"><a href="#" class="more">更多 »</a></span>
                            </div>
                            <div class="nGameList">
                                <ul id="u2">
                                <?php 
                                    //书写sql语句 这里是从第25条记录开始查找5条记录后获得的表格
                                    $sql_3 = " select * from game_rank_data limit 25, 5";
                                    $res_3 = mysqli_query($link,$sql_3);
                                    //将结果转化成关系型数组
                                    $arr_3 = mysqli_fetch_all($res_3,1);
                                    // var_dump($arr);

                                    //现在遍历数组生成对应的li标签
                                    for($i=0;$i<count($arr_3);$i++): 
                                    ?>

                                    <li >
                                        <div class="topSub"><?php echo $arr_3[$i]['Id'] - 25;  ?></div>
                                        <img src="<?php echo $arr_3[$i]['gameImg']  ?>" alt="" >
                                        <i><?php echo $arr_3[$i]['gameName']  ?></i>
                                        <span class="download-h ">
                                            <a href="#">
                                            <i class="left iconfont icon_home">&#xe613;</i>
                                            </a>
                                            <a href="#">
                                                <i class="mid iconfont icon_home_ios">&#xe600;</i>
                                             </a>
                                             <a href="#">
                                                <i class="right iconfont icon_home_android">&#xe614;</i>
                                            </a>
                                        </span>
                                    </li>

                                    <?php endfor; ?>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--热门手游结束-->
                </div>
            </div>
        </div>
    </div>
</div>
<!--网页头部结束-->
</body>
</html>

整个代码如果利用从后端接收数据后,在循环遍历数据的形式来生成li标签的话,代码的不冗余.执行效率也很高.但是如果全部利用HTML来书写的话,li标签都要书写30个.现在也贴上代码,让各位比较一下.

//其中一个模块的代码
 <!--热门游戏开始-->
                    <div class="zh-nGame">
                        <div class="zh-nGameh">
                            <span class="left">热门排行榜</span>
                            <span class="right"><a href="#" class="more">更多 »</a></span>
                        </div>
                        <p>排名&nbsp;&nbsp;游戏</p>
                        <div class="nGameList">
                            <ul>
                                <li class="screenPH"><div class="topSub">1</div>
                                    <img src="game_rank_data/lol-2.jfif" alt="" class="displayNow">
                                    <i>英雄联盟</i>
                                    <span class="download-h showSpan"><a href="#" class="left"><i class="iconfont icon_home">&#xe613;</i> <em>进入官网</em></a><a
                                            href="#" class="right"><i class="iconfont icon_download">&#xe69a;</i> <em>下载游戏</em></a></span>
                                </li>
                                <li><div class="topSub">2</div>
                                    <img src="game_rank_data/cf-2.jfif" alt="">
                                    <i>穿越火线</i>
                                    <span class="download-h"><a href="#" class="left"><i class="iconfont icon_home">&#xe613;</i> <em>进入官网</em></a><a
                                            href="#" class="right"><i class="iconfont icon_download">&#xe69a;</i> <em>下载游戏</em></a></span>
                                </li>
                                <li><div class="topSub">3</div>
                                    <img src="game_rank_data/dnf-2.jfif" alt="">
                                    <i> 地下城与勇士</i>
                                    <span class="download-h"><a href="#" class="left"><i class="iconfont icon_home">&#xe613;</i> <em>进入官网</em></a><a
                                            href="#" class="right"><i class="iconfont icon_download">&#xe69a;</i> <em>下载游戏</em></a></span>
                                <li><div class="sub">4</div>
                                    <img src="game_rank_data/nz-2.jfif" alt="">
                                    <i>逆战</i>
                                    <span class="download-h"><a href="#" class="left"><i class="iconfont icon_home">&#xe613;</i> <em>进入官网</em></a><a
                                            href="#" class="right"><i class="iconfont icon_download">&#xe69a;</i> <em>下载游戏</em></a></span>
                                </li>
                                <li><div class="sub">5</div>
                                    <img src="game_rank_data/cod-2.jfif" alt="">
                                    <i> 使命召唤OL</i>
                                    <span class="download-h"><a href="#" class="left"><i class="iconfont icon_home">&#xe613;</i> <em>进入官网</em></a><a
                                            href="#" class="right"><i class="iconfont icon_download">&#xe69a;</i> <em>下载游戏</em></a></span>
                                </li>
                                <li><div class="sub">6 </div>
                                    <img src="game_rank_data/x5-2.jfif" alt="">
                                    <i>QQ炫舞</i>
                                    <span class="download-h"><a href="#" class="left"><i class="iconfont icon_home">&#xe613;</i> <em>进入官网</em></a><a
                                            href="#" class="right"><i class="iconfont icon_download">&#xe69a;</i> <em>下载游戏</em></a></span>
                                </li>
                                <li><div class="sub">7</div>
                                    <img src="game_rank_data/speed-2.jfif" alt="">
                                    <i>QQ飞车</i>
                                    <span class="download-h"><a href="#" class="left"><i class="iconfont icon_home">&#xe613;</i> <em>进入官网</em></a><a
                                            href="#" class="right"><i class="iconfont icon_download">&#xe69a;</i> <em>下载游戏</em></a></span>
                                </li>
                                <li><div class="sub">8</div>
                                    <img src="game_rank_data/5s-2.jfif" alt="">
                                    <i> 炫舞时代</i>
                                    <span class="download-h"><a href="#" class="left"><i class="iconfont icon_home">&#xe613;</i> <em>进入官网</em></a><a
                                            href="#" class="right"><i class="iconfont icon_download">&#xe69a;</i> <em>下载游戏</em></a></span>
                                </li>
                                <li><div class="sub">9 </div>
                                    <img src="game_rank_data/wuxia-2.jfif" alt="">
                                    <i>天涯明月刀</i>
                                    <span class="download-h"><a href="#" class="left"><i class="iconfont icon_home">&#xe613;</i> <em>进入官网</em></a><a
                                            href="#" class="right"><i class="iconfont icon_download">&#xe69a;</i> <em>下载游戏</em></a></span>
                                </li>
                                <li><div class="sub">10</div>
                                    <img src="game_rank_data/fifa-2.jfif" alt="">
                                    <i>FIFA Online3</i>
                                    <span class="download-h"><a href="#" class="left"><i class="iconfont icon_home">&#xe613;</i> <em>进入官网</em></a><a
                                            href="#" class="right"><i class="iconfont icon_download">&#xe69a;</i> <em>下载游戏</em></a></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--热门游戏结束-->

我们看到代码是非常冗余的,因为这里面需要把所有的li标签都书写出来,大大增加了书写代码的事件.

CSS代码:

/*CSS代码初始化*/
p,
a,
input,
div,
span,
li,
ul,
h1,
h2,
h3,
em,
i,
body,
img {
    padding: 0px;
    margin: 0px;
}

a {
    color: black;
    text-decoration: none;
}

input {
    outline: none;
    border: 0 none;
}

img {
    border: 0 none;
    vertical-align: middle;
}

li {
    list-style: none;
}

h1,
h2,
h3 {
    font-weight: normal;
}

i,
em {
    font-style: normal;
}
body{
    font: 12px/100% '微软雅黑';
}

.w {
    width: 1024px;
    margin:  0 auto;
}

.clearfix :after {
    content: '';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;
}

/*顶栏css样式开始*/
.zh-header {
    height: 40px;
    width: 100%;
    border-top: 1px solid #c9c9c9;
    border-bottom: 1px solid #c9c9c9;

}

.zh-header .zh-left {
    position: absolute;
}

.zh-header-inner {
    position: relative;
}

.zh-header .zh-left .zh-tgplogo {
    position: absolute;
    top: 0px;
}

.zh-header .zh-left .zh-tgplogo a {
    display: block;
    height: 40px;
    width: 220px;
    background: url("images/ost-bg.png") 0px -38px;
}
.zh-header .zh-left .zh-nba {
    position: absolute;
    left: 226px;
}

.zh-header .zh-left .zh-nba #zh-bigNba {
    position: absolute;
    width: 970px;
    height: 185px;
    background: url("images/83445944012793976651533118900970185.1533118953.edaa1f6cc78905e06b1e0e2032597bc5.970x185_46440.jpg");
    left: -216px;
    display: none;
}

.zh-right .zh-chsh i {
    float: left;
    width: 18px;
    height: 18px;
    background: url("images/logo.png");
}


.zh-right .zh-chsh a:hover {
    color: red;
}

.zh-right .zh-chsh {
    float: left;
    line-height: 18px;
    margin-right: 30px;
    margin-top: 11px;
}

.zh-right .zh-pxb  {
    float: left;
    height: 42px;
}

.zh-right .zh-pxb>a {
    line-height: 42px;
}

/*.zh-right .zh-pxb a:hover {*/
/*color: red;*/
/*}*/


.zh-right .zh-pxb #zh-ph {
    position: absolute;
    width: 12px;
    height: 12px;
    background: url("images/ost-bg.png") -150px -134px;
    margin-left: 3px;
    left: 209px;
    top: 16px;
}

/*排行榜显示样式*/
#zh-gameRank {
    width: 698px;
    height: 465px;
    position: absolute;
    background-color: #fff;
    left: -475px;
    border: 1px solid #ccc;
    display: none;
    overflow: hidden;
    z-index: 3;
}

#zh-gameRank .zh-nGame {
    margin-top: 17px;
    width: 231px;
    height: 430px;
    float: left;
    border-right: 1px solid #ccc;

}

#zh-gameRank .zh-nGame .zh-nGameh {
    width: 208px;
    height: 20px;
    background-color: #fff;
    margin-left: 10px;
    border-bottom: 1px solid #999999;
}

#zh-gameRank .zh-nGame .zh-nGameh .left {
    line-height: 20px;
    text-align: center;
    float: left;
    font-weight: bold;
}

#zh-gameRank .zh-nGame .zh-nGameh .right {
    line-height: 20px;
    text-align: center;
    float: right;
}

#zh-gameRank .zh-nGame .zh-nGameh .right a.more {
    line-height: 20px;
    color: #707e91;
}

#zh-gameRank .zh-nGame .zh-nGameh .right a.more:hover {
    color: red;
}

#zh-gameRank .zh-nGame>p {
    color: #999;
    margin-left: 10px;
    margin-top: 13px;
    margin-bottom: 15px;
}

#zh-gameRank .zh-nGame .nGameList li .topSub {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #ff4e00;
    color: #fff;
    line-height: 16px;
    text-align: center;
    z-index: 2;
    top: -1px;
    left: -1px;
}

#zh-gameRank .zh-nGame .nGameList li>i {
    margin-left: 43px;
}

#zh-gameRank .zh-nGame .nGameList li .sub {
    position: absolute;
    width: 14px;
    height: 14px;
    border-left: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-right: 1px solid #999999;
    color: #999;
    line-height: 16px;
    text-align: center;
    top: -1px;
    left: -1px;
    z-index: 2;
}

#zh-gameRank .zh-nGame .nGameList li.screenPH {
    width: 194px;
    height: 82px;
    border: 1px solid #ccc;
}

#zh-gameRank .zh-nGame .nGameList li img {
    position: absolute;
    left: 0px;
    display: none;

}

#zh-gameRank .zh-nGame .nGameList li img.displayNow {
    display: block;
}

#zh-gameRank .zh-nGame .nGameList li {
    position: relative;
    margin-bottom: 14px;
    margin-left: 15px;
}

#zh-gameRank .zh-nGame .nGameList li .download-h {
    position: absolute;
    width: 194px;
    height: 28px;
    background-color: rgba(0,0,0,0.6);
    top: 56px;
    left: 0px;
    display: none;
}



#zh-gameRank .zh-nGame .nGameList li .showSpan {
    display: block;
}
#zh-gameRank .zh-nGame .nGameList li .download-h a:hover em {
    color: red;
    text-decoration: underline;
}

#zh-gameRank .zh-nGame .nGameList li .download-h a:hover .iconfont {
    color: red;
}

#zh-gameRank .zh-nGame .nGameList li .download-h a .iconfont {
    font-size: 12px;
    color: #aaa;
}

#zh-gameRank .zh-nGame .nGameList li .download-h a em {
    display: inline-block;
    line-height: 14px;
    color: #aaa;

}


#zh-gameRank .zh-nGame .nGameList li .download-h a.left {
    position: absolute;
    width: 97px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    left: 0px;
    top: 0;
}

#zh-gameRank .zh-nGame .nGameList li .download-h a.right {
    position: absolute;
    width: 97px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    left: 97px;
    top: 0;
}


/*手游排行开始*/
#zh-gameRank .zh-nPhoneGame {
    margin-top: 17px;
    width: 234px;
    /*height: 195px;*/
    float: right;

}


#zh-gameRank div#phoneBottom #phoneBottomH {
    margin-bottom: 18px;
}

#zh-gameRank .zh-nPhoneGame .zh-nGameh {
    width: 211px;
    height: 20px;
    background-color: #fff;
    margin-left: 10px;
    border-bottom: 1px solid #999999;
}

#zh-gameRank .zh-nPhoneGame .zh-nGameh .left {
    line-height: 20px;
    text-align: center;
    float: left;
    font-weight: bold;
}

#zh-gameRank .zh-nPhoneGame .zh-nGameh .right {
    line-height: 20px;
    text-align: center;
    float: right;
}

#zh-gameRank .zh-nPhoneGame .zh-nGameh .right a.more {
    line-height: 20px;
    color: #707e91;
}

#zh-gameRank .zh-nPhoneGame .zh-nGameh .right a.more:hover {
    color: red;
}

#zh-gameRank .zh-nPhoneGame p {
    color: #999;
    margin-left: 10px;
    margin-top: 13px;
    margin-bottom: 15px;
}

#zh-gameRank .zh-nPhoneGame .nGameList li .topSub {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #ff4e00;
    color: #fff;
    line-height: 16px;
    text-align: center;
    z-index: 2;
    top: -1px;
    left: -1px;
}

#zh-gameRank .zh-nPhoneGame .nGameList li i {
    margin-left: 43px;
}

#zh-gameRank .zh-nPhoneGame .nGameList li .sub {
    position: absolute;
    width: 14px;
    height: 14px;
    border-left: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-right: 1px solid #999999;
    color: #999;
    line-height: 16px;
    text-align: center;
    top: -1px;
    left: -1px;
    z-index: 2;
}

#zh-gameRank .zh-nPhoneGame .nGameList li.screenPH {
    width: 194px;
    height: 82px;
    border: 1px solid #ccc;
}

#zh-gameRank .zh-nPhoneGame .nGameList li img {
    position: absolute;
    left: 0px;
    display: none;

}

#zh-gameRank .zh-nPhoneGame .nGameList li img.displayNow {
    display: block;
}

#zh-gameRank .zh-nPhoneGame .nGameList li {
    position: relative;
    margin-bottom: 14px;
    margin-left: 15px;
}

#zh-gameRank .zh-nPhoneGame .nGameList li .download-h {
    position: absolute;
    width: 194px;
    height: 28px;
    background-color: rgba(0,0,0,0.6);
    top: 53px;
    left: 0px;
    display: none;
}

#zh-gameRank .zh-nPhoneGame .nGameList li .showSpan {
    display: block;
}


.zh-nPhoneGame .nGameList li .download-h i {
    position: absolute;
    width: 66px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    color: #aaa;

}

.zh-nPhoneGame .nGameList li .download-h i.left {
    left: -43px;
}

.zh-nPhoneGame .nGameList li .download-h i.mid {
    left: 22px;
    width: 65px;
    border-right: 1px solid #5d5d5d;
    border-left: 1px solid #5d5d5d;
}

.zh-nPhoneGame .nGameList li .download-h i.right {
    left: 87px;
}
/*手游排行结束*/
/*游戏排名样式结束*/
.zh-right {
    height: 42px;
    position: absolute;
    left: 755px;
}

.zh-right a {
    color: #464646;
}

.zh-header-inner {
    margin: 0 auto;
    width: 990px;
    height: 42px;
}
/*css 顶栏css样式 结束*/
/*游戏排名样式结束*/

jQuery页面交互代码：

/*
** Create by Alex on 2018/8/13
*/

//顶栏鼠标交互
$(function (  ) {
    $('.zh-nba').on('mouseenter', function (  ) {
        $('#zh-bigNba').show( ).css('zIndex',1);
        $('.zh-tgplogo').css('zIndex', 2);
    })  //NBA图片事件

    $('.zh-nba').on('mouseleave',function (  ) {
        $('#zh-bigNba').hide( );
    })

    var defaultColor = null
    $('.zh-nav li:odd').on('mouseenter', function (  ) {
        defaultColor = $ ( this ).find ( "a" ) .css('color');
        $ ( this ).find ( "a" ) .css('color' , '#fff')
    }) //导航栏事件

    $('.zh-nav li:odd').on('mouseleave', function (  ) {
        $ ( this ).find ( "a" ).css('color' , defaultColor)
    })

//    排行榜鼠标移入事件

    $('#zh-pxb').on('mouseenter' , function (  ) {
        defaultColor = $ ( this ).children( "a" ) .css('color');
        $ ( this ).children( "a" ) .css('color' , 'red');
        $(this).find('#zh-ph').css('background-position','-170px -134px')
        $('#zh-gameRank').show( )
    })

    $('#zh-pxb').on('mouseleave', function (  ) {
        $ ( this ).children( "a" ).css('color' , defaultColor);
        $(this).find('#zh-ph').css('background-position','-150px -134px');
        $('#zh-gameRank').hide( )
    })

    $('#zh-gameRank .zh-nGame .nGameList li').on('mouseenter', function (  ) {
        $(this).addClass('screenPH');
        $(this).siblings(this).removeClass('screenPH');
        $(this).children('img').show( );
        $(this).siblings(this).children('img').hide( );
        $(this).children('.download-h').show( );
        $(this).siblings(this) .children('.download-h').hide( );
    })

    var $phoneList = $('#phoneGame li')
    $('#phoneGame li').on('mouseenter', function (  ) {
        $(this).addClass('screenPH');
        // console.log ( $phoneList )
        for(var i = 0;i<$phoneList.length;i++){
            if (  this == $phoneList[i]) {
                this.className = 'screenPH'
                $($phoneList[i]).children('img').show( );
                $($phoneList[i]).children('.download-h').show( );
            }else{
                $phoneList[i].className = '';
                $($phoneList[i]).children('img').hide( );
                $($phoneList[i]).children('.download-h').hide( )
            }
        }


    })

    $('#phoneGame li .iconfont').on('mouseenter' , function (  ) {
        defaultColor1 = $ ( this ).css('color');
        $(this).css('color','red');
    })


    $('#phoneGame li .iconfont').on('mouseleave' , function (  ) {
        $(this).css('color',defaultColor1);
    })
})

具体的代码已经上传到：GitHub上面。https://github.com/Alex-Li1996/demoGameRankTecent/blob/master/gameRank.rar

猜你喜欢

转载自blog.csdn.net/weixin_42839080/article/details/81951893
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022