jQuery商品飞入购物车效果
分类:实例代码
分享一段代码实例,它简单实现了飞入购物车效果的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { padding: 0; margin: 0; } ul li { list-style: none; padding: 10px; overflow: hidden; } .left_a { display: block; width: 100px; height: 100px; text-align: center; background: #ccc; font-size: 26px; float: left; text-decoration: none; color: #fff; overflow: hidden; margin-right: 18px; } .right_div { position: relative; } .right_div h2 { font-size: 16px; color: #666; } .right_div p { font-size: 14px; color: #666; padding-top: 8px; } .add_cart { display: block; position: absolute; top: 74%; right: 2%; border: 1px solid red; padding: 4px 8px; text-align: center; font-size: 16px; text-decoration: none; background: rgba(0, 180, 0, 0.5); color: #fff; } .cart_shop { width: 80px; height: 80px; border-radius: 50%; background: #d2d2d2; box-shadow: 0 0 2px #d2d2d2; line-height: 80px; text-align: center; border-radius: 50%; position: fixed; bottom: 50px; right: 3%; } .cart_shop a { display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; position: absolute; top: 0; right: 0; background: red; border-radius: 50%; color: white; font-size: 12px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { $(".add_cart").click(function () { $(".cart_shop a").text(parseInt($(".cart_shop a").text()) + 1); var shopOffset = $(".cart_shop").offset(); var leftaOffset = $(this).parent().siblings('.left_a').offset(); var cloneDiv = $(this).parent().siblings('.left_a').clone(); cloneDiv.css({ "position": "absolute", "left": leftaOffset.left, "top": leftaOffset.top, }); $(this).parent().siblings('.left_a').parent().append(cloneDiv); cloneDiv.stop().animate({ width: 0, height: 0, left: shopOffset.left, top: shopOffset.top, opacity: 1 }, 'slow'); }); }) </script> </head> <body> <ul> <li> <a href="#" class="left_a"></a> <div class="right_div"> <a href="#" class="add_cart">添加</a> </div> </li> <li> <a href="#" class="left_a" style="color:green;"></a> <div class="right_div"> <a href="#" class="add_cart">添加</a> </div> </li> </ul> <div class="cart_shop"> <a href="">0</a> </div> </body> </html>
上面的代码实现了我们的要求,代码比较简单,更多内容可以参阅相关阅读。
相关阅读:
(1).parseInt()参阅javascript parseInt()一章节。
(2).offset()参阅jQuery offset()方法一章节。
(3).parent()参阅jQuery parent()方法一章节。
(4).siblings()参阅jQuery siblings()方法一章节。
jQuery商品飞入购物车效果,这样的场景在实际项目中还是用的比较多的,关于jQuery商品飞入购物车效果就介绍到这了。
jQuery商品飞入购物车效果属于前端实例代码,有关更多实例代码大家可以查看。