天猫 点击加入购物车，商品图片向购物车飞行的动画

animate

解决方案 »

  1.   

    用jquery  能实现 具体 到网上搜一下  jquery特效 一般都有
      

  2.   

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
    $(document).ready(function(){
       $(".goodss").click(function() {
             
                var shopOffset = $("#shop").offset();
                var cloneDiv = $(this).parents("td").find("div").clone();
                var proOffset = $(this).parents("td").find("div").offset();
                cloneDiv.css({ "position": "absolute", "top": proOffset.top, "left": proOffset.left });
                $(this).parents("td").find("div").parent().append(cloneDiv);
     
                cloneDiv.animate({
                    left: shopOffset.left,
                    top: shopOffset.top
                },"slow");
            });
    });
    </script>
    </head>
    <body>
     
        <table style="width: 100%;">
            <tr>
                <td>
                    <div style="width:100px; height: 100px; border: 1px solid #f08080" id="shop">购物车</div>
                </td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="height: 300px">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td> <div style="width: 50px; height: 50px; background-color: #f08080">
                        商品
                    </div>
                    <input class="goodss"  id="Button1" type="button" value="添加购物车" /></td>
                <td> <div style="width: 50px; height: 50px; background-color: #f08080" >
                        商品
                    </div>
                    <input class="goodss" id="Button1" type="button" value="添加购物车" /></td>
                <td>
                    <div style="width: 50px; height: 50px; background-color: #f08080">
                        商品
                    </div>
                    <input  class="goodss" id="Button1" type="button" value="添加购物车" />
                </td>
          <td>
                    <div style="width: 50px; height: 50px; background-color: #f08080">
                        商品
                    </div>
                    <input  class="goodss" id="Button1" type="button" value="添加购物车" />
                </td>
            </tr>
        </table>
    </body>
    </html>