我們在訪問天貓、京東以及其它網站時,鼠標放在商品廣告上,商品的廣告會有一個滑動效果,鼠標移開后,圖片恢復原位。其實原理很簡單,就是一個簡單的位置變化,可以通過很多方法實現。下面看看用效果animate()如何實現吧!
效果圖:


image.png

思路:
1.鼠標移入,.stop(),防止動畫疊加。然後利用效果animate改變圖片位置。
2.鼠標移出,.stop(),防止動畫疊加。然後利用效果animate還原圖片位置。

代碼(本文使用的jQuery版本是1.11.3,在低版本IE及W3C瀏覽器中效果相同):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .hd{
                 width: 400px;
                 height: 300px;
                 border: 4px palegreen solid;
                 float: left;
                 margin: 10px;
                 position: relative;

            }
            .hd .hd_pic{
                width: 200px;
                left: 100px;
                top: 90px;
                position: absolute;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".hd").mouseenter(function(){
                    $(this).find('.hd_pic').stop().animate({'left':'90px','top':'80px'},300);
                });
                $(".hd").mouseleave(function(){
                    $(this).find('.hd_pic').stop().animate({'left':'100px','top':'90px'},300)
                })
            })
        </script>
    </head>
    <body>
        <div class="hd">
            ![](hd.jpg)
        </div>
        <div class="hd">
            ![](hd.jpg)
        </div>
        <div class="hd">
            ![](hd.jpg)
        </div>
        <div class="hd">
            ![](hd.jpg)
        </div>
        <div class="hd">
            ![](hd.jpg)
        </div>
        <div class="hd">
            ![](hd.jpg)
        </div>
        <div class="hd">
            ![](hd.jpg)
        </div>
        <div class="hd">
            ![](hd.jpg)
        </div>
        <div class="hd">
            ![](hd.jpg)
        </div>
        <div class="hd">
            ![](hd.jpg)
        </div>
    </body>
</html>