商品描述（動畫）— jQuery
本文章實現是基於jQuery展示商品描述的一個功能
（1）滑鼠移入顯示描述內容，滑鼠移開內容隱藏.先來看看一個先後效果。
（2）jQuery所以的文件可以自行下載，也可以在我主頁找到文件，右鍵文件名複製鏈接，又或者聯繫我。
（3）效果是帶動畫的，animate() 是jQuery里封裝好的動畫函數。
1、滑鼠未移入時，也就是默認打開狀態
2、滑鼠移入效果
那接下來直接上程式碼
html程式碼：
註：每個li表示一個商品，ul是商品列表
1 <div class="wrapper"> 2 <div class="container"> 3 <ul class="list"> 4 <li> 5 <div class="img-box"> 6 <!-- 商品圖片 --> 7 <img src="" alt=""> 8 <span>商品1</span> 9 </div> 10 <div class="des-box"> 11 <p>商品描述1</p> 12 </div> 13 </li> 14 15 <li> 16 <div class="img-box"> 17 <!-- 商品圖片 --> 18 <img src="" alt=""> 19 <span>商品2</span> 20 </div> 21 <div class="des-box"> 22 <p>商品描述2</p> 23 </div> 24 </li> 25 26 <li> 27 <div class="img-box"> 28 <!-- 商品圖片 --> 29 <img src="" alt=""> 30 <span>商品3</span> 31 </div> 32 <div class="des-box"> 33 <p>商品描述3</p> 34 </div> 35 </li> 36 37 <li> 38 <div class="img-box"> 39 <!-- 商品圖片 --> 40 <img src="" alt=""> 41 <span>商品4</span> 42 </div> 43 <div class="des-box"> 44 <p>商品描述4</p> 45 </div> 46 </li> 47 </ul> 48 </div> 49 </div>
css程式碼：
1 <style> 2 body{ 3 margin: 0; 4 } 5 ul{ 6 margin: 0; 7 padding: 0; 8 list-style: none; 9 } 10 .container{ 11 width: 1200px; 12 margin: 0 auto; 13 } 14 .container ul li{ 15 width: 276px; 16 height: 300px; 17 margin: 0 10px; 18 float: left; 19 border: 2px solid #000; 20 position: relative; 21 /* 溢出隱藏 */ 22 overflow: hidden; 23 } 24 .container ul li .img-box{ 25 padding: 20px; 26 } 27 .container ul li .img-box img{ 28 width: 100%; 29 } 30 .container ul li .des-box{ 31 width: 280px; 32 height: 40px; 33 background-color: orange; 34 line-height: 40px; 35 36 position: absolute; 37 left: -2px; 38 bottom: -40px; 39 z-index: 1000; 40 } 41 .container ul li .des-box p{ 42 padding: 0; 43 margin: 0; 44 margin-left: 10px; 45 } 46 </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>
此處表示程式碼結束。。。
效果是帶動畫的，這裡可能看不出，可以自己嘗試寫一下。個人感覺還是不錯滴….
