鼠标移入图片轻微移动

浏览数：27 / 时间：2015年06月11日

本人在懒人之家上看到的，虽然很简单，但有值得我们学习和注意的地方：

  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>