jQuery商品加入购物车效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车动画效果</title>
<link rel="stylesheet" href="https://www.jq22.com/demo/jqueryGwc202209010123/css/base.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<div id="goods">
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/1.png"></li>
<li class="godprice">￥25.00</li>
<li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/3.png"></li>
<li class="godprice">￥56.00</li>
<li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/3.png"></li>
<li class="godprice">￥56.00</li>
<li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/3.png"></li>
<li class="godprice">￥56.00</li>
<li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/3.png"></li>
<li class="godprice">￥56.00</li>
<li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/2.png"></li>
<li class="godprice">￥37.00</li>
<li class="godinfo">用文字打败时间。冯唐最畅销作品，杂文才是其销量最好、最受欢迎的作品。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/05.jpg"></li>
<li class="godprice">￥25.00</li>
<li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/1.jpg"></li>
<li class="godprice">￥56</li>
<li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/1.jpg"></li>
<li class="godprice">￥37.00</li>
<li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/2.png"></li>
<li class="godprice">￥37.00</li>
<li class="godinfo">用文字打败时间。冯唐最畅销作品，杂文才是其销量最好、最受欢迎的作品。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/1.jpg"></li>
<li class="godprice">￥37.00</li>
<li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/1.jpg"></li>
<li class="godprice">￥56</li>
<li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
<li class="godadd"><a href="javascript:;">加入购物车</a></li>
</ul>
</div>
</div>
<div id="godcar">
<div class="dnum">0</div>
<div class="dcar">
<img src="https://www.jq22.com/demo/jqueryGwc202209010123/img/shop.png">
</div>
</div>
</body>
<script>
//首先需要获取到商品的图片，然后将获取到的图片复制一份；
var i = 0;
var inum = 0;
if(localStorage.getItem("inum")!==null){
inum = localStorage.getItem("inum");
}
$(".dnum").text(inum);
$(".godadd").click(function(){
if (!$(this).find("a").hasClass("bg")) {
i++;
$(this).find("a").addClass("bg");
// 首先需要获取到商品的图片，然后将获取到的图片复制一份；
var img = $(this).parent().find(".godpic").find("img");
var cimg = img.clone();
// 得到商品图片的top和left值，购物车的top和left值，这样才可以通过animate函数实现移动
var imgtop = img.offset().top;
var imgleft = img.offset().left;
var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left;
// 编写animate函数，实现具体的效果；
cimg.appendTo($("body")).css({
"position": "absolute",
"opacity": "0.7",
"top": imgtop,
"left": imgleft
}).animate({
"top": cartop,
"left": carleft,
"width": "40px",
"height": "40px",
"opacity": "0.3"
}, 1000, function () {
cimg.remove();//图片消失
$(".dnum").text(i);//购物车数量变化
localStorage.setItem("inum", i);
});
}
});
</script>
</html>
谢谢分享感谢大佬！！！ 感谢大佬分享 这个板子不错谢谢分享，支持牛牛论坛
页:
[1]