JQ+CSS实现鼠标上移显示更多内容的排行列表

最新推荐文章于 2024-09-14 08:09:14 发布

鱼仰泳

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量559

点赞数 13

分类专栏： JS+CSS案例分享文章标签： css 前端

本文链接：https://blog.csdn.net/uuplay0216/article/details/139986512

版权

JS+CSS案例分享专栏收录该内容

16 篇文章 0 订阅

订阅专栏

吃完了午饭，再来写一篇教程。还是老规矩，先发图片，再说话。避免浪费您宝贵的工作学习时间。【本例代码资源下载】

这是一个排行列表的效果，比较常用于各种资讯类，资源类的排行列表。其实这个效果，如果仅仅是要实现滑动展示更多内容，不需要更复杂的功能，仅用css代码也可以实现类似效果。但我这里要实现一个额外的需求，就是鼠标移开后，列表不产生变化。所以仅仅使用 css的hover后显示隐藏的div的这个方法就不能实现了。

好了，先不说更多废话，咱们看看布局代码：

<div class="rank_wrap">
    <ul id="rank_list" class="side_rank_list">
        <li class="active"> <!-- 第一个li要给它加上active类，用于页面刷新时，默认展示第一名 -->
            <div class="normail_rank"> <!-- 正常展示 -->
              <div class="rank_number">1</div>        
              <div class="side_rank_title">007:大破天幕杀机</div>
              <div class="side_rank_score">豆瓣9.0</div>
            </div>
            <div class="active_rank "><!-- 激活展开展示 -->
                <div class="rank_number">1</div>
                <div class="side_rank_img" >
                  <a href="###" title="007:大破天幕杀机" rel="bookmark">
                    <img src="images/1.png">
                  </a>
                </div>
                <div class="side_rank_title">
                    <a href="###" title="007:大破天幕杀机" rel="bookmark">007:大破天幕杀机</a>
                </div>                    
                <div class="side_rank_score">豆瓣9.0</div>
                <div class="side_rank_actors">
                    <span>莫尼卡·贝鲁奇&nbsp;&nbsp;</span><span>圭塞佩·苏尔法罗&nbsp;&nbsp;</span><span>玛蒂尔德·皮亚纳&nbsp;&nbsp;</span>
                </div>
                <div class="side_rank_cat">动画&nbsp;&nbsp;动作&nbsp;&nbsp;情感</div>
            </div>
        </li>
        <li >
            ....
        </li>
        <li >
            ....
        </li>
        <li >
            ....
        </li>
       ... <!-- 具体展示多少个li由需求决定，程序员控制，我就不多复制了。-->
    </ul>
</div>

因为这是静态页展示效果，复制了多遍的li的内容，所以代码比较看起来很长，但实际用程序写循环时候，就不会有这么多了。我这里简化一下代码，开启不那么乱。

类名为 rank_wrap 的 div 是用来控制排行榜整体的，包括位置，宽度和高度。

ID名为 rank_list 的 div 是排行榜的列表框，js代码用这个id来操作。

接下来，我们看看样式表：

/*************************  排行榜样式 ****************************/
.rank_wrap{
    position: fixed;
    width: 380px;
    height: 540px;
    overflow: hidden;
    /* 居中 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    border-radius: 15px; 
        
}
.side_rank_list{ 
    clear: both;
    width: 100%;
    height: auto;
    float: left;
    display: block;
    margin-top:10px;
    box-sizing: border-box;
}

.side_rank_list li{
    list-style:none;        
    height:auto;
    /* counter-increment: mycounter; */
    width: 100%;
    display: block;
    float: left;
    box-sizing: border-box;
    padding: 10px 0px;
    margin:0px;
    border-bottom:1px dashed #e3e3e3;
}

.rank_number{
    margin-right:8px; 
    display:inline-block; 
    width:23px; 
    height:23px;
    -moz-border-radius: 10px 4px 4px 4px;  
    -webkit-border-radius: 10px 4px 4px 4px; 
    border-radius: 10px 4px 4px 4px; 
    -khtml-border-radius:10px 4px 4px 4px; 
    text-align:center;
    background:#e7e8e9;
    font-size: 1.0rem;
    line-height: 1.5rem;
    display: inline-block;
    float:left;
    font-style: italic;
}


.side_rank_list li:nth-child(1) .rank_number{
    background:#CC0033; 
    color: #fff;
}
.side_rank_list li:nth-child(2) .rank_number{
    background:#FF9933; 
    color: #fff;
}
.side_rank_list li:nth-child(3) .rank_number{
    background:#FFCC33; 
    color: #fff;
}

.active_rank{
    position: relative;
    width: 100%;
    height: 122px;  
    background: #ededed;
    border-radius: 10px;    
    overflow: hidden;
    display: none;
}
.side_rank_img{
    position: absolute;
    left: 0;
    top: 0;
    width: 96px;
    height: 122px;
    border-radius: 10px;
    overflow: hidden;
}
.side_rank_img img{
    width: 96px;
    height: auto;
}
.active .active_rank{
    display: block;
}
.active .normail_rank{
    display: none;
}

.active .side_rank_score{
    background: #66c2ff;
    color: #fff;
}

.side_rank_title{
    float: left;
    width: 70%;
    font-size: 1.0rem;
    line-height: 1.3rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.side_rank_title a{
    color: #333;
    text-decoration: none;
}
.side_rank_title a:hover{
    text-decoration: underline;
}
.side_rank_score{
    width: 15%;
    text-align: right;
    float: right;
    display: inline-block;
    margin-right: 0px;
    color: #999;
    width: auto;
    min-width: 30px;
    height: 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -khtml-border-radius: 3px;    
    background: #e3e4e5;
    font-size: 12px;
    padding: 0px 5px;
    line-height: 20px;
}

.active_rank .rank_number{
    position: absolute;
    z-index: 9;
}

.active_rank .side_rank_title{
    width: 55%;
    margin-left: 110px;
    margin-top: 10px;
}

.side_rank_actors{
    clear: both;
    float: left;
    margin-left: 110px;
    width: 65%;
    height: 54px;
    margin-top: 5px;
    overflow: hidden;
    color: #999;
    font-size: 14px;
}
.side_rank_cat{
    margin-right: 15px;
    margin-top: 5px;
    clear:both;
    float: right;
}

因在页面展开时，除了第一项显示详情，其他行都是简单展示，所以，在css样式表中，我们要把 .active_rank 的样式设为 display:none；下面这两句css样式，就是本例实现的核心之一，当鼠标移动到li上时，通过js给目标li 增加active类，这时，li中包含的 active_rank 的div就可见了，同时，让被激活的li下面包含的 normail_rank 的div不可见。

.active .active_rank{
    display: block;
}
.active .normail_rank{
    display: none;
}

然后通过绝对定位的布局方式，把更多详情都写在 .active_rank 这个div中。当鼠标移动到列表项时，我们需要给目标li增加一个active类，并且，其他的li的active类被移除，这实现起来非常简单。接下来看看js是如何操作的：

  // 使用jQuery
  $('#rank_list li').hover(function() {
    // 鼠标移入时给当前li添加类，具体展示是在css中实现的。
    $(this).addClass('active');
     // 鼠标移入时，去掉其他li上的active类。
    $('#rank_list li').not(this).removeClass('active');
  });

好了，到这里就大功告成了！相信你也看明白了。

最后，我把JQ+CSS实现鼠标上移显示更多内容的排行列表的源码放在这里，供大家下载参考。

感谢您花时间看完本篇，希望对您的学习工作有所帮助！啊，忘了，顺便求个赞！哈哈哈~