jQuery实现购物车添加商品动画及localStorage持久化存储教程

简易购物车功能实现概述

网络上关于购物车功能的实现方案层出不穷，在梳理相关知识点后，我决定动手编写一个简易版本的购物车功能，下面将详细拆解其具体实现过程。

首先，使用HTML结构搭建页面内容框架；

其次，利用CSS对页面外观进行美化修饰；

最后，借助JavaScript（或jQuery）来实现交互动效。

HTML结构与CSS样式设计

第一步是HTML页面的结构设计。我使用一个大的div容器包裹所有商品，并分别用不同的div封装各个商品项。在商品列表展示上，采用了ul和li标签组合的方式。具体实现代码如下（注：代码中引用的商品数据均为网络示例，仅供参考，无实际业务价值）：


<div id="goods">
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/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="images/2.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="images/3.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="images/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="images/2.png"></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/3.png"></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/car.jpg">
  </div>
 </div>

这里涉及一个关键知识点：在代码片段 <li class="godadd"><a href="javascript:;">加入购物车</a></li> 中，href属性使用了 javascript:; 这种写法。其作用是阻止链接默认跳转行为，仅执行绑定的空事件或后续脚本逻辑。

第二步是外观样式设计。为了优化显示效果，我为包含每个商品列表的div设置了明确的width、height以及border属性。值得注意的是，为了实现购物车图标固定在页面特定位置的效果，将其position属性设置为fixed，并通过调整top和left值来确定其最终显示位置。此外，灵活运用margin和padding可以显著提升页面的美观度。

补充说明：若需给行内元素设置width、height或其他仅适用于块级元素的属性，必须先将其display属性设置为block。

具体的CSS设计代码如下：


* {
 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;
}

代码中的 * 选择器用于重置所有元素的默认样式，在开发初期统一设置margin和padding是良好的编码习惯。

jQuery购物车动画效果实现

第三步，在静态页面完成后，引入jQuery来实现购物车的核心逻辑，包括商品添加、数量增减等交互。我花费较多精力设计了一个视觉效果：当商品加入购物车时，其图片会平滑移动至购物车图标位置，同时逐渐缩小并最终消失。这一过程主要依赖jQuery的animate函数完成。实现该功能的核心难点在于如何准确计算图片的移动路径及尺寸变化。

接下来详细解析该动画效果的实现步骤：

1）首先获取当前商品的图片元素，并将其克隆一份副本；


var img = $(this).parent().find(".godpic").find("img");
 var cimg = img.clone();

2）获取原商品图片相对于视口的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;

3）编写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); //购物车数量变化
   });

通过上述步骤，简单的位移与缩放动画效果便得以实现。

购物车数据持久化方案

随后考虑到用户体验，每次刷新页面导致购物车数量重置为0显然不符合实际使用场景。因此，我查阅资料并总结了三种实现数据持久化的方案：

（1）将数据保存至后端数据库；（2）利用Cookie机制存储；（3）采用HTML5的localStorage本地存储方案；

最终我选择了第三种方案，即localStorage。这既出于对HTML5新技术的好奇尝试，也因其特性符合需求：localStorage存储的数据没有时间限制，数据可长期保留，即使关闭浏览器或重启电脑，数据依然存在。我的具体实现代码使用了localStorage.getItem方法读取数据。

至此，所有核心功能讲解完毕。附上完整的jQuery代码，如果对你有帮助，欢迎点赞支持：


var i = 0;
$(function(){
 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();

   var imgtop = img.offset().top;
   var imgleft = img.offset().left;

   var cartop = $("#godcar").offset().top;
   var carleft = $("#godcar").offset().left;

   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);
   });
  }

 });
});

运行效果图如下：

简易购物车功能实现概述

以上就是本文的全部内容，希望能为你的学习提供有益帮助，也欢迎大家继续支持本站。

基于jQuery与HTML5 localStorage实现简易购物车动画效果

简易购物车功能实现概述

HTML结构与CSS样式设计

jQuery购物车动画效果实现

购物车数据持久化方案

实用工具推荐