表情列表展示

此版本基于原生jQuery写法  （另一版本为Javascript版本，请前往Javascript分类中查看。）

　　嗨~  来到这里相信大家已经看过Javascript版本的写法了。来到这才发现什么叫做没有对比就没有伤害，同时也体现了jQuery的特性：写的少做得多。

　　功能：鼠标悬浮表情，在指定区域显示当前鼠标的表情。(与Javascript版本实现的功能一样，只是写法不一样。)

　　注：由于排版不一样（其实也差不了多少，排版只是位置不一样，也比较简单。），所以效果图也不一样，但是这都不碍事，排版的事都是自己决定的哈！（可以自己丰富一下，练练手。）

　　直接来个效果看看先

 既然看也看了，不如动起手来，直接丢出代码...

实现步骤：

1、html代码：

<div class="container">
        <!-- 展示区域 -->
        <div class="show">
          <img src="" alt="" id="showImg">
        </div>
        <!-- 表情区 -->
        <div class="content">
          <ul class="ul">
            <!-- 动态创建 -->
            <!-- <li>
              <img src="./face/1.gif" alt="">
            </li> -->
          </ul>
        </div>
      </div>

2、css代码：

.container{
          width: 800px;
          height: 600px;
          border: 1px solid #000;
          position: relative;
        }
        .show{
          width: 50px;
          height: 50px;
          line-height: 50px;
          border: 1px solid #000;
          margin: 50px auto;
          text-align: center;
          position: absolute;
          right: 0;
          bottom: 0;
        }
    
        .show img{
          vertical-align: middle;
        }
        .content{
          width: 800px;
          height: 400px;
          border: 1px solid #000;
          margin-left: -1px;
          margin-right: -1px;
        }
    
        .content ul{
          width: 720px;
          padding: 0;
          margin: 50px 20px;
          overflow: hidden;
          /* background-color: #f2f2f2; */
        }
        .content li{
          display: block;
          width: 25px;
          height: 25px;
          border: 1px solid #000;
          float: left;
          margin-left: 8px;
          margin-right: 10px;
          margin-bottom: 5px;
          cursor: pointer;
        }
        .content li img{
            width: 25px;
            height: 25px;
        }

3、脚本部分：

<script src="../jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>  // 引入jQuery文件
<script type="text/javascript">
    // 
    $(function(){
        var str = "";  // 创建Li
        for(var i = 0 ; i < 75 ; i++){
            str += '<li><img src="../face/'+(i+1)+'.gif" /></li>';
        }
        $(".ul").append(str);  // 添加 li 到 ul 中

        $(".content .ul li").mouseenter(function(){  // 给每个li添加事件
            var index = $(this).index();           // 获取当前li的下标
            $(".show img").attr("src","../face/"+(index+1)+".gif");  // 设置图片的路径
        }) 
    })
</script>

 

总结：对比Javascript版本的就知道，jQuery写的代码就10几行，就能实现同样的功能。其实实现的步骤是一样的，只是jq帮我们已经封装好方法，直接调用就能实现，而Javascript就需要自己一步一步写这个过程。所以大家只需要看需求就可以，根据需求经过考虑用哪种方式实现是比较优的，就完事了。

 

需要回顾Javascript版本，请前往Javascript分类中查看哟~   

 

文章到此结束。。。