用jQuery实现排行榜（so easy！！！）

用jQuery实现排行榜

前言
案例图示
HTML
CSS
jQuery核心代码

1、方法一
2、方法二

前言

在很多网页中我们经常会看到电影排行榜、时事热点排行榜、热销图书排行榜等等。今天这个案例就用jQuery实现一个热销图书排行榜。So easy！！！

案例图示

在这里插入图片描述

HTML<font color=red

简单说一下页面布局：
主要部分就是五个 li标签，标签里主要有一个 span标签 和一个具有类选择器 content 的 div标签；类选择器 content 作用是对 img标签 和 p标签 作样式设置并到达左浮右浮的效果

<div class="box">
    <h2>热销图书排行榜</h2>
    <ul>
      <li>
        <span>1</span>红楼梦
        <div class="content">
          <img src="../program1/images/1.jpg" >
          <p>我是第一本书的内容我是第一本书的内容我是第一本书的内容我是第一本书的内容</p>
        </div>
      </li>
      <li>
        <span>2</span>三国演义
        <div class="content">
          <img src="../program1/images/1.jpg" >
          <p>我是第二本书的内容我是第二本书的内容我是第二本书的内容我是第二本书的内容</p>
        </div>
      </li>
      <li>
        <span>3</span>水浒传
        <div class="content">
          <img src="../program1/images/1.jpg" >
          <p>我是第三本书的内容我是第三本书的内容我是第三本书的内容我是第三本书的内容</p>
        </div>
      </li>
      <li>
        <span>4</span>西游记
        <div class="content">
          <img src="../program1/images/1.jpg" >
          <p>我是第四本书的内容我是第四本书的内容我是第四本书的内容我是第四本书的内容</p>
        </div>
      </li>
    </ul>
</div>

CSS

简单说一下页面样式布局，这里有几点是需要大噶注意的吼
（1）ul>li:nth-child(-n+3) span ：这句代码实现的是选取小于等于第三个 li标签 的 span标签 作相应的样式.
（2）在上面说到了类选择器 content 的作用是对 img标签 和 p标签 作样式设置并到达左浮右浮的效果。特别要注意类选择器content 要设置 overflow: hidden; 清除浮动；要设置 display: none; 隐藏，
（3）类选择器 current 的作用是在 jQuery 中对已触发事件的 li标签 添加样式，使类选择器 content 所在的 div内容 显示在浏览器上，所以设置 display: block;

<style>
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
  .box {
    height: 400px;
    width: 300px;
    border: 2px solid #ccc;
    margin: 20px auto;
  }
  .box h2 {
    font-size: 20px;
    line-height: 35px;
    color: crimson;
    padding-left: 5px;
    border-bottom: 1px dashed #ccc;
  }
  ul>li {
    padding: 5px;
    border-bottom: 1px dashed #ccc;
  }
  ul>li:hover {
    cursor: pointer;
  }
  ul>li:nth-child(-n+3) span {
    background-color: crimson;
  }
  ul>li>span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    line-height: 20px;
    text-align: center;
    margin-right: 10px;
  }
  /* 父元素清除浮动 */
  .content {
    overflow: hidden;
    padding: 5px;
    display: none;
  }
  .content>img {
    height: 80px;
    float: left;
  }
  .content>p {
    width: 130px;
    float: right;
  }
  .current .content{
    display: block;
  }
</style>

jQuery核心代码

1、方法一

使用 mousemove和mouseout 对每个li标签监听移入移出事件。
触发移入事件时添加类选择器 current，触发移出事件移除类选择器 current

<script src="../jquery.js"></script>
<script>
    $(function() {
      //监听li的移入事件
      $("li").mousemove(function() {
        $(this).addClass("current")
      })
      //监听li的移出事件
      $("li").mouseout(function() {
        $(this).removeClass("current")
      })
    });
</script>

2、方法二

还可以使用 hover() 方法

<script src="../jquery.js"></script>
<script>
    $(function() {
      $("li").hover(function(){
        $(this).addClass("current")
      },function(){
        $(this).removeClass("current")
      })
    });
</script>