本人在懒人之家上看到的，虽然很简单，但有值得我们学习和注意的地方：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .lanren{ 12 width: 663px; 13 border: solid #e5e5e5; 14 border-width: 1px 0 0 1px; 15 margin: 50px auto; 16 } 17 .lanren ul{ 18 overflow: hidden; 19 list-style: none; 20 } 21 .lanren ul li{ 22 float: left; 23 width: 200px; 24 height: 100px; 25 padding: 15px 10px 10px 10px; 26 border-right: 1px solid #ededed; 27 border-bottom: 1px solid #ededed; 28 cursor: pointer; 29 } 30 .lanren ul li img{ 31 float: left; 32 margin-right: 10px; /*图片的margin值*/ 33 } 34 .lanren ul li p{ 35 text-align: left; 36 color: #666; 37 font-size: 12px; 38 margin-bottom: 5px; 39 line-height: 140%; 40 max-height: 32px; 41 overflow: hidden; 42 } 43 .lanren ul li b{ 44 color: #e12228; 45 font-size: 16px; 46 font-weight: 700; 47 } 48 </style> 49 </head> 50 <body> 51 52 <div class="lanren"> 53 <ul> 54 <li> 55 <img src="images/lanren01.jpg" alt=""/> 56 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b> 57 </li> 58 <li> 59 <img src="images/lanren02.jpg" alt=""/> 60 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b> 61 </li> 62 <li> 63 <img src="images/lanren03.jpg" alt=""/> 64 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b> 65 </li> 66 <li> 67 <img src="images/lanren04.jpg" alt=""/> 68 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b> 69 </li> 70 <li> 71 <img src="images/lanren05.jpg" alt=""/> 72 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b> 73 </li> 74 <li> 75 <img src="images/lanren06.jpg" alt=""/> 76 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b> 77 </li> 78 </ul> 79 </div> 80 81 82 <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> 83 <script> 84 $(function (){ 85 $('.lanren li').hover(function () { 86 $(this).find('img').stop().animate({ 87 'margin-left':'-10px', 88 'margin-right':'20px' //margin-right加了10px，防止p元素移动 89 },500); 90 },function () { 91 $(this).find('img').stop().animate({ 92 'margin-left':'0px', 93 'margin-right':'10px' 94 },500); 95 }); 96 }); 97 </script> 98 99 </body> 100 </html>