<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-2.1.4.min.js"></script> <style> * { padding: 0px; margin: 0px; font-family: "微软雅黑"; }
.goodsItem{ width:280px; height: 400px; float: left; border: 1px solid #ccc; margin:5px; } #goods{ width:910px; } .goditem{ list-style: none; } .godpic img{ display: block; width:250px; height: 250px; margin:0px auto; } .godprice,.godinfo,.godadd{ display: block; width:220px; margin:0px auto; text-align: center; } .godprice{ font-size: 20px; color: #f00; } .godinfo{ text-align: center; font-size: 14px; margin: 10px 0px;
} .godadd a{ display: block; width: 150px; height: 36px; background-color: #fd6a01; border-radius: 10px; margin: 0px auto; text-decoration: none; color:#fff; line-height: 36px; } #godcar{ position: fixed; right: 0px; top:40%; width: 72px; height: 64px; } #godcar .dnum{ width:24px; height: 24px; border-radius: 12px; background-color: #f00; text-align: center; line-height: 24px; position: absolute; font-size: 12px; top:0px; } .godadd .bg { background-color: #808080; }
</style>
</head><body><div id="goods"> <div class="goodsItem"> <ul class="goditem"> <li class="godpic"><img src="images/shops/whellz.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="images/shops/teapotz.jpg"></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="images/shops/rosez.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="images/shops/pooltablez.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="images/shops/Grassz.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="images/shops/lightz.jpg"></li> <li class="godprice">￥37.00</li> <li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</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="images/shop3.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>
时间： 2024-10-08 01:25:20