加入购物车动画 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加入购物车动画</title> <style type="text/css"> .sidebar{position: fixed;right: 5px;bottom: 130px;} </style> </head> <body> <div id="img_wrap"> <img src="http://img2.xcabc.com/201601/16/20160116033226996398.jpg" alt=""> </div> <div class="sidebar">车</div> <button class="add_btn">我是按钮</button> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".add_btn").click(function(){ //添加到购物车动画 var src=$("#img_wrap img").attr('src'); var $shadow = $('<img id="cart_dh" style="display: none; border:1px solid #aaa; z-index: 99999;" width="400" height="400" src="'+src+'" />').prependTo("body"); var $img = $("#img_wrap img"); $shadow.css({ 'width' : $img.css('width'), 'height': $img.css('height'), 'position' : 'absolute', 'top' : $img.offset().top, 'left' : $img.offset().left, 'opacity' :1 }).show(); var $cart =$(".sidebar"); $shadow.animate({ width: 1, height: 1, top: $cart.offset().top, left: $cart.offset().left, opacity: 0 },500,function(){ }); }); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 加入购物车动画