jquery 加入购物车示例

本文主要是介绍jquery 加入购物车示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

仅供学习，转载请注明出处

编写一个加入购物车的按钮，然后动画一个圆点到购物车，同时数量加1。

淡定直接写出基本html以及css，如下：

根据点击加入购物车的位置，增加一个红色的圆形

编写jquery实现小红圆的移动效果、以及购物车数量的追加

每点击一次加入购物车，小红球就会移动到购物车数量，并且数量每次加1

完整代码如下

<!DOCTYPE html>
<html>
<head><title></title><script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){var $ball = $('.ball');$('.add_cart_warp input').click(function(){// 打印加入购物车按钮的尺寸位置// console.log($('.add_cart_warp input').offset());// console.log($('.add_cart_warp input').width());// console.log($('.add_cart_warp input').height());$ball.css({"top":$('.add_cart_warp input').offset().top+($('.add_cart_warp input').height()/2),"left":$('.add_cart_warp input').offset().left+($('.add_cart_warp input').width()/2),}).show();// 打印购物车数量的尺寸位置console.log($('.cart_warp').offset());console.log("width=" + $('.cart_warp').width());console.log("height=" + $('.cart_warp').height());var $ball_cart_top = $('.cart_warp').offset().top+($('.cart_warp').height()/4);var $ball_cart_left = $('.cart_warp').offset().left+($('.cart_warp').width()/2)// var $ball_cart_top = $('.cart_warp').offset().top;// var $ball_cart_left = $('.cart_warp').offset().left;console.log("ball_cart_top=" + $ball_cart_top);console.log("ball_cart_left=" + $ball_cart_left);// 设置改变位置的动画animate$ball.animate({"top":$ball_cart_top,"left":$ball_cart_left,},2000,function(){// 设置小红球消失$ball.fadeOut();// 设置数量+1console.log($('.cart_warp em').html());var sum = parseInt($('.cart_warp em').html()) + 1;console.log(sum);$('.cart_warp em').html(sum);})})})</script><style type="text/css">.add_cart_warp {margin-top: 100px;margin-left: 100px;}.ball{width: 10px;height: 10px;border-radius: 10px;background-color: red;position: fixed;
/*          top:100px;left: 108px;*/display: none;}.cart_warp{width: 100px;height: 20px;margin-top:80px;margin-left: 300px;background-color: gold;}</style>
</head>
<body><div class="ball"></div><div class="add_cart_warp"><input type="button" name="" value="点击加入购物车"></div><!-- div.cart_warp>span{购物车数量}+em{0} --><div class="cart_warp"><span>购物车数量</span><em>0</em></div>
</body>
</html>