使用 js 和jquery动画实现购物车左滑，请引入jquery库，不然会报错哦！

首页编写页面，注意布局，滑动分成两部分，商品图片和信息放在一个布局，删除和移入收藏放在一起。

其中js用到了 touchstart touchend addEventListener事件。

获取的是滑动的方向距离即定义为 startX, startY, endX, endY 具体实现附完整代码 githup：https://github.com/ad-skylar/cart-leftslide，下面是展示图

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport"  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  6.     <title>购物车</title>
  7.     <link rel="stylesheet" type="text/css" href="index.css" />
  8.   </head>
  9.   <body>
  10.     <div class="cart clearfix">
  11.       <!-- 购物车列表 start-->
  12.       <div class="list-goods  clearfix">
  13.         <div class="scroll-part">
  14.           <!-- 商品信息 sart -->
  15.           <div class="scroll-left ui-flex" id="part1">
  16.             <div class="ui-flex goods-img " style="width:40%;">
  17.                 <img class="" src="data:images/img1.png" />
  18.             </div>
  19.             <div class="main-info-wrapper ui-flex" style="width:58%">
  20.               <div class="goods-info">
  21.                 <div class="goods-info-title">Jordan官方AIR JORDAN 1 HIGH ZIP AJ1女子运动鞋高帮AQ3742</div>
  22.                 <div class="goods-info-size">
  23.                   <div>100帆白/柠檬绿黄/空间蓝/草皮橙</div>
  24.                   <div>尺码：38</div>
  25.                 </div>
  26.                 <div class="sell-price">
  27.                   已降
  28.                   <span>￥20.00</span>
  29.                 </div>
  30.                 <div class="goods-info-price">
  31.                   <span class="price-now">￥799</span>
  32.                   <span class="price-original">￥1299.00</span>
  33.                 </div>
  34.               </div>
  35.             </div>
  36.           </div>
  37.           <!-- 商品信息 sart -->
  38.           <!-- 商品删除收藏按钮 sart -->
  39.           <div class="handel-right ui-flex">
  40.             <span class="move-collection ui-flex">
  41.               移入收藏
  42.             </span>
  43.             <span class="delete ui-flex">
  44.               删除
  45.             </span>
  46.           </div>
  47.           <!-- 商品删除收藏按钮 sart -->
  48.         </div>
  49.       </div>
  50.       <!--购物车列表 end-->
  51.        <!-- 购物车列表 start-->
  52.        <div class="list-goods  clearfix">
  53.             <div class="scroll-part">
  54.               <!-- 商品信息 sart -->
  55.               <div class="scroll-left ui-flex" id="part1">
  56.                 <div class="ui-flex goods-img " style="width:40%;">
  57.                     <img class="" src="data:images/img1.png" />
  58.                 </div>
  59.                 <div class="main-info-wrapper ui-flex" style="width:58%">
  60.                   <div class="goods-info">
  61.                     <div class="goods-info-title">Jordan官方AIR JORDAN 1 HIGH ZIP AJ1女子运动鞋高帮AQ3742</div>
  62.                     <div class="goods-info-size">
  63.                       <div>100帆白/柠檬绿黄/空间蓝/草皮橙</div>
  64.                       <div>尺码：38</div>
  65.                     </div>
  66.                     <div class="sell-price">
  67.                       已降
  68.                       <span>￥20.00</span>
  69.                     </div>
  70.                     <div class="goods-info-price">
  71.                       <span class="price-now">￥799</span>
  72.                       <span class="price-original">￥1299.00</span>
  73.                     </div>
  74.                   </div>
  75.                 </div>
  76.               </div>
  77.               <!-- 商品信息 sart -->
  78.               <!-- 商品删除收藏按钮 sart -->
  79.               <div class="handel-right ui-flex">
  80.                 <span class="move-collection ui-flex">
  81.                   移入收藏
  82.                 </span>
  83.                 <span class="delete ui-flex">
  84.                   删除
  85.                 </span>
  86.               </div>
  87.               <!-- 商品删除收藏按钮 sart -->
  88.             </div>
  89.           </div>
  90.           <!--购物车列表 end-->
  91.     </div>
  92.     <script src="js/jquery.min.js"></script>
  93.     <script type="text/javascript" src="index.js"></script>
  94.   </body>
  95. </html>

css

  1. *{
  2.     margin:0;
  3.     padding:0;
  4. }
  5. body{
  6.     background-color: #efeff4;
  7.     -webkit-overflow-scrolling: touch;
  8. }
  9. .list-goods{
  10.     background-color: #fff;
  11.     height: 160px;
  12.     margin-top: 10px;
  13.     overflow: hidden;
  14.     white-space: nowrap;
  15.     position: relative;
  16.  
  17. }
  18. .scroll-part{
  19.     float: left;
  20.     white-space: nowrap;
  21.     position: relative;
  22.     width: 100%;
  23.     height: 100%;
  24. }
  25. .list-goods:first-of-type{
  26.     margin-top: 0;
  27. }
  28. .list-goods .goods-img{
  29.     margin-right: 0.2rem;
  30.     width: 40%;
  31.     height: 40%;
  32. }
  33. .list-goods .goods-img img{
  34.     width: 100%;
  35.     height: 100%;
  36. }
  37. .scroll-left{
  38.     position: absolute;
  39.     width: 100%;
  40.     background: #fff;
  41.     box-sizing: border-box;
  42. }
  43. /* 商品信息 */
  44. .goods-info{
  45.     padding: 10px;
  46. }
  47. .goods-info .goods-info-title{
  48.     font-size: 14px;
  49.     color: #767676;
  50.     white-space: pre-wrap;
  51. }
  52. .goods-info .goods-info-price{
  53.     margin-top: 4px;
  54. }
  55. .goods-info .sell-price {
  56.     color:#ff3e41;
  57.     margin-top: 6px;
  58.     font-size: 13px;
  59. }
  60. .goods-info .goods-info-size{
  61.     color:#b0b0b0;
  62.     font-size: 13px;
  63.     padding: 4px 0;
  64. }
  65.  
  66. .goods-info .goods-info-price .price-now{
  67.     color: #cf170f;
  68.     font-size: 13px;
  69.     margin-right:4px;
  70. }
  71. .goods-info .goods-info-price .price-original{
  72.     color: #6a6a6a;
  73.     text-decoration: line-through;
  74.     font-size: 0.38rem;
  75.     margin-right: 0.7rem;
  76. }
  77.  
  78. /* 商品删除收藏 */
  79.  
  80. .scroll-part .handel-right{
  81.     color: #fff;
  82.     position: relative;
  83.     height: 100%;
  84.     width: 30%;
  85.     position: absolute;
  86.     right: -11rem;
  87.     top: 0;
  88.  
  89. }
  90. .handel-right span{
  91.     height: 100%;
  92.     width: 38%;
  93.     text-align: center;
  94.     align-items: center;
  95.     padding: 0 0.2rem;
  96.     justify-content: center;
  97. }
  98. .handel-right .move-collection{
  99.     background-color: #ffa800;
  100.     white-space: pre-wrap;
  101. }
  102. .handel-right .delete{
  103.     background-color: #fe3a3c;
  104.     box-sizing: border-box;
  105.     width: 68%;
  106. }
  107.  
  108. /* 通用 */
  109.  
  110. /** flex */
  111. .ui-flex { display: -webkit-box; display: -webkit-flex; display: flex; }
  112. .clearfix{
  113.     overflow: hidden;
  114. }
  115. .colorprimary{
  116.     color: #ff3f3e !important;
  117. }

js

  1. $(function () {
  2.     //左滑右滑效果
  3.     var moveDiv = "";
  4.     for (var i = 0; i < $(".scroll-left").length; i++) {
  5.         moveDiv = $(".scroll-left")[i];
  6.         var startX;
  7.         moveDiv.addEventListener('touchstart', function (ev) {
  8.             ev.preventDefault();
  9.             startX = ev.touches[0].pageX;
  10.             startY = ev.touches[0].pageY;
  11.         }, false);
  12.         moveDiv.addEventListener('touchend', function (ev) {
  13.             ev.preventDefault();
  14.             var endX, endY;
  15.             endX = ev.changedTouches[0].pageX;
  16.             endY = ev.changedTouches[0].pageY;
  17.             var direction = GetSlideDirection(startX, startY, endX, endY);
  18.             switch (direction) {
  19.                 case 1:
  20.  
  21.                     $(this).next().animate({ right: "0" });
  22.                     $(this).animate({ left: "-8em" });
  23.                     break;
  24.                 case 2:
  25.                     $(this).next().animate({ right: "-11rem" });
  26.                     $(this).animate({ left: "0" });
  27.                     break;
  28.                 default:
  29.             }
  30.         }, false);
  31.     } 
  32.  
  33. })
  34. function GetSlideAngle(dx, dy) {
  35.     return Math.atan2(dy, dx) * 180 / Math.PI;
  36. }
  37.  
  38. //根据起点和终点返回方向 1：向左，2：向右,
  39. function GetSlideDirection(startX, startY, endX, endY) {
  40.     var dy = startY - endY;
  41.     var dx = endX - startX;
  42.     var result = 0;
  43.  
  44.     //如果滑动距离太短
  45.     if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
  46.         return result;
  47.     }
  48.     var angle = GetSlideAngle(dx, dy);
  49.     if (angle >= -45 && angle < 45) {
  50.         result = 2;
  51.     } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
  52.         result = 1;
  53.     }
  54.  
  55.     return result;
  56. }

js实现购物车左滑删除的更多相关文章

  1. JS实现移动端购物车左滑删除功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. 基于touch.js 左滑删除功能

    左滑删除功能 完整代码如下: (touch.js) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  3. 仿QQ列表左滑删除

    一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...

  4. 微信小程序独家秘笈之左滑删除

    代码地址如下:http://www.demodashi.com/demo/14056.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  5. Android开发学习之路-PopupWindow和仿QQ左滑删除

    这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...

  6. 模仿QQ左滑删除

    需求: 1.左滑删除 2.向左滑动距离超过一半的时候让它自动滑开,向右滑动超过一半的时候自动隐藏 3.一次只允许滑开一个item 还有,根本不需要自定义view来实现,谨防入坑 布局: <?xm ...

  7. tableView左滑删除功能

    实现三个代理方法即可 -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtI ...

  8. [转]ANDROID仿IOS微信滑动删除_SWIPELISTVIEW左滑删除例子

    转载:http://dwtedx.sinaapp.com/itshare_290.html 本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除 ...

  9. wex5 实战 苹果左滑删除与长按编辑

    用了多年苹果,习惯了苹果的左滑删除与长按编辑,特别是短信什么的,很多安卓界面也采用了类似方式. 我的想法突如其来,用wex5也设计一个这样的功能,可以吗? 那句广告词,没有什么不可能. 呵呵. 一   ...

随机推荐

  1. 多媒体开发（5）&音频特征：声音可以调大一点吗？

    基本上,现在常用的声音采样办法是pcm,而对于压缩音频的解码,得到的也pcm数据.这个pcm数据,只是一堆数值,有正有负,看这个值看不出什么花样. 声音采集,采的是什么呢? 采的是声音的强度变化,也是 ...

  2. SpringBoot2.+restful风格请求方式设置以及表单中日期格式设置

    ​ 1).SpringBoot在自动配置很多组件的时候,先看容器中有没有用户自己配置的(@Bean.@Component)如果有就用用户配置的,如果没有,才自动配置:如果有些组件可以有多个(ViewR ...

  3. Docker学习笔记之搭建Docker私有仓库

    Docker仓库服务器名为Docker注册(registry)服务器.可以使用docker push命令将镜像上传到注册服务器,也可以使用docker pull命令下载服务器的镜像. Docker注册 ...

  4. CVE-2020-0796复现

    今天整理资料时发现了之前存的一个cve漏洞复现过程,当时打算跟着复现来着,后来也没去复现,今天刚好有时间,所以来复现一下这个漏洞 漏洞讲解 https://www.freebuf.com/vuls/2 ...

  5. top有用的开关控制命令

    [原创]本文为原创博文,转发请注明出处:https://www.cnblogs.com/dingbj/p/top_command.html 今天偶然用到top命令,在动态刷新的界面上输入h顺便看了下帮 ...

  6. 词嵌入之Word2Vec

    词嵌入要解决什么问题 在自然语言系统中,词被看作最为基本的单元,如何将词进行向量化表示是一个很基本的问题,词嵌入(word embedding)就是把词映射为低维实数域向量的技术. 下面先介绍几种词的 ...

  7. 与数论的厮守05:gcd(a,b)=gcd(b,a mod b)的证明

    \[设c=gcd(a,b),那么a可以表示为mc,b可以表示为nc的形式.然后令a=kb+r,那么我们就\\ 只需要证明gcd(b,r)=c即可.{\because}r=a-kb=mc-knc,{\t ...

  8. 浅谈JavaScript代码性能优化2

    一.减少判断层级 从下图代码中可以明显看出,同样的效果判断层级的减少可以优化性能 二.减少作用域链查找层级 简单解释下,下图中第一个运行foo函数,bar函数内打印name,bar作用域内没有name ...

  9. 前端知识(二)01-NPM包管理器-谷粒学院

    目录 一.简介 二.使用npm管理项目 1.项目初始化 2.修改npm镜像 3.npm install命令的使用 4.其它命令 一.简介 什么是NPM NPM全称Node Package Manage ...

  10. DDD的实体、值对象、聚合根的基类和接口：设计与实现

    1 前置阅读 在阅读本文章之前,你可以先阅读: 什么是DDD 2 实现值对象 值对象有两个主要特征:它们没有任何标识.它们是不可变的. 我们举个例子:小明是"浙江宁波"人,小红也是 ...