使用 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 实现值对象 值对象有两个主要特征:它们没有任何标识.它们是不可变的. 我们举个例子:小明是"浙江宁波"人,小红也是 ...