商品描述（动画）--- jQuery

本文章实现是基于jQuery展示商品描述的一个功能

　　（1）鼠标移入显示描述内容，鼠标移开内容隐藏.先来看看一个先后效果。

　　（2）jQuery所以的文件可以自行下载，也可以在我主页找到文件，右键文件名复制链接，又或者联系我。

　　（3）效果是带动画的，animate() 是jQuery里封装好的动画函数。

1、鼠标未移入时，也就是默认打开状态

2、鼠标移入效果

   那接下来直接上代码

　 html代码：

　 注：每个li表示一个商品，ul是商品列表

 <div class="wrapper">
             <div class="container">
                 <ul class="list">
                     <li>
                         <div class="img-box">
                             <!-- 商品图片 -->
                             <img src="" alt="">
                             <span>商品1</span>
                         </div>
                         <div class="des-box">
                             <p>商品描述1</p>
                         </div>
                     </li>

                     <li>
                         <div class="img-box">
                             <!-- 商品图片 -->
                             <img src="" alt="">
                             <span>商品2</span>
                         </div>
                         <div class="des-box">
                             <p>商品描述2</p>
                         </div>
                     </li>

                     <li>
                         <div class="img-box">
                             <!-- 商品图片 -->
                             <img src="" alt="">
                             <span>商品3</span>
                         </div>
                         <div class="des-box">
                             <p>商品描述3</p>
                         </div>
                     </li>

                     <li>
                         <div class="img-box">
                             <!-- 商品图片 -->
                             <img src="" alt="">
                             <span>商品4</span>
                         </div>
                         <div class="des-box">
                             <p>商品描述4</p>
                         </div>
                     </li>
                 </ul>
             </div>
         </div>

css代码：

 <style>
             body{
                 margin: 0;
             }
             ul{
                 margin: 0;
                 padding: 0;
                 list-style: none;
             }
             .container{
                 width: 1200px;
                 margin: 0 auto;
             }
             .container ul li{
                 width: 276px;
                 height: 300px;
                 margin: 0 10px;
                 float: left;
                 border: 2px solid #000;
                 position: relative;
                 /* 溢出隐藏 */
                 overflow: hidden;
             }
             .container ul li .img-box{
                 padding: 20px;
             }
             .container ul li .img-box img{
                 width: 100%;
             }
             .container ul li .des-box{
                 width: 280px;
                 height: 40px;
                 background-color: orange;
                 line-height: 40px;

                 position: absolute;
                 left: -2px;
                 bottom: -40px;
                 z-index: 1000;
             }
             .container ul li .des-box p{
                 padding: 0;
                 margin: 0;
                 margin-left: 10px;
             }
         </style>

　 jQuery代码：

// 一定要先引入jq文件才书写自己的jq代码，引入文件中含有min的是压缩版，用于线上版的较多。不含min的是未压缩版，我们能看得懂的，用于开发环境比较多。
<script src="../../jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                // 获取每个li 并且绑定事件
                // 鼠标移入
                $(".list li").mouseenter(function(){
                    // 找出对应的商品描述
                    // .stop() 类似定时器的防抖思想 不加就会时，一直移入移出鼠标动画会停不下来，加了才没有Bug
                    $(this).find(".des-box").stop().animate({bottom: 0},100)
                })
                // 鼠标离开
                $(".list li").mouseleave(function(){
                    // 隐藏对应的商品描述
                    $(this).find(".des-box").stop().animate({bottom: -40},100)
                })
            })
        </script>

此处表示代码结束。。。

效果是带动画的，这里可能看不出，可以自己尝试写一下。个人感觉还是不错滴....