js实现购物车左滑删除

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

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

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

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

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <meta name="viewport"  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <title>购物车</title>

    <link rel="stylesheet" type="text/css" href="index.css" />

  </head>

  <body>

    <div class="cart clearfix">

      <!-- 购物车列表 start-->

      <div class="list-goods  clearfix">

        <div class="scroll-part">

          <!-- 商品信息 sart -->

          <div class="scroll-left ui-flex" id="part1">

            <div class="ui-flex goods-img " style="width:40%;">

                <img class="" src="data:images/img1.png" />

            </div>

            <div class="main-info-wrapper ui-flex" style="width:58%">

              <div class="goods-info">

                <div class="goods-info-title">Jordan官方AIR JORDAN 1 HIGH ZIP AJ1女子运动鞋高帮AQ3742</div>

                <div class="goods-info-size">

                  <div>100帆白/柠檬绿黄/空间蓝/草皮橙</div>

                  <div>尺码：38</div>

                </div>

                <div class="sell-price">

                  已降

                  <span>￥20.00</span>

                </div>

                <div class="goods-info-price">

                  <span class="price-now">￥799</span>

                  <span class="price-original">￥1299.00</span>

                </div>

              </div>

            </div>

          </div>

          <!-- 商品信息 sart -->

          <!-- 商品删除收藏按钮 sart -->

          <div class="handel-right ui-flex">

            <span class="move-collection ui-flex">

              移入收藏

            </span>

            <span class="delete ui-flex">

              删除

            </span>

          </div>

          <!-- 商品删除收藏按钮 sart -->

        </div>

      </div>

      <!--购物车列表 end-->

       <!-- 购物车列表 start-->

       <div class="list-goods  clearfix">

            <div class="scroll-part">

              <!-- 商品信息 sart -->

              <div class="scroll-left ui-flex" id="part1">

                <div class="ui-flex goods-img " style="width:40%;">

                    <img class="" src="data:images/img1.png" />

                </div>

                <div class="main-info-wrapper ui-flex" style="width:58%">

                  <div class="goods-info">

                    <div class="goods-info-title">Jordan官方AIR JORDAN 1 HIGH ZIP AJ1女子运动鞋高帮AQ3742</div>

                    <div class="goods-info-size">

                      <div>100帆白/柠檬绿黄/空间蓝/草皮橙</div>

                      <div>尺码：38</div>

                    </div>

                    <div class="sell-price">

                      已降

                      <span>￥20.00</span>

                    </div>

                    <div class="goods-info-price">

                      <span class="price-now">￥799</span>

                      <span class="price-original">￥1299.00</span>

                    </div>

                  </div>

                </div>

              </div>

              <!-- 商品信息 sart -->

              <!-- 商品删除收藏按钮 sart -->

              <div class="handel-right ui-flex">

                <span class="move-collection ui-flex">

                  移入收藏

                </span>

                <span class="delete ui-flex">

                  删除

                </span>

              </div>

              <!-- 商品删除收藏按钮 sart -->

            </div>

          </div>

          <!--购物车列表 end-->

    </div>

    <script src="js/jquery.min.js"></script>

    <script type="text/javascript" src="index.js"></script>

  </body>

</html>

css

*{

    margin:0;

    padding:0;

}

body{

    background-color: #efeff4;

    -webkit-overflow-scrolling: touch;

}

.list-goods{

    background-color: #fff;

    height: 160px;

    margin-top: 10px;

    overflow: hidden;

    white-space: nowrap;

    position: relative;

}

.scroll-part{

    float: left;

    white-space: nowrap;

    position: relative;

    width: 100%;

    height: 100%;

}

.list-goods:first-of-type{

    margin-top: 0;

}

.list-goods .goods-img{

    margin-right: 0.2rem;

    width: 40%;

    height: 40%;

}

.list-goods .goods-img img{

    width: 100%;

    height: 100%;

}

.scroll-left{

    position: absolute;

    width: 100%;

    background: #fff;

    box-sizing: border-box;

}

/* 商品信息 */

.goods-info{

    padding: 10px;

}

.goods-info .goods-info-title{

    font-size: 14px;

    color: #767676;

    white-space: pre-wrap;

}

.goods-info .goods-info-price{

    margin-top: 4px;

}

.goods-info .sell-price {

    color:#ff3e41;

    margin-top: 6px;

    font-size: 13px;

}

.goods-info .goods-info-size{

    color:#b0b0b0;

    font-size: 13px;

    padding: 4px 0;

}

.goods-info .goods-info-price .price-now{

    color: #cf170f;

    font-size: 13px;

    margin-right:4px;

}

.goods-info .goods-info-price .price-original{

    color: #6a6a6a;

    text-decoration: line-through;

    font-size: 0.38rem;

    margin-right: 0.7rem;

}

/* 商品删除收藏 */

.scroll-part .handel-right{

    color: #fff;

    position: relative;

    height: 100%;

    width: 30%;

    position: absolute;

    right: -11rem;

    top: 0;

}

.handel-right span{

    height: 100%;

    width: 38%;

    text-align: center;

    align-items: center;

    padding: 0 0.2rem;

    justify-content: center;

}

.handel-right .move-collection{

    background-color: #ffa800;

    white-space: pre-wrap;

}

.handel-right .delete{

    background-color: #fe3a3c;

    box-sizing: border-box;

    width: 68%;

}

/* 通用 */

/** flex */

.ui-flex { display: -webkit-box; display: -webkit-flex; display: flex; }

.clearfix{

    overflow: hidden;

}

.colorprimary{

    color: #ff3f3e !important;

}

$(function () {

    //左滑右滑效果

    var moveDiv = "";

    for (var i = 0; i < $(".scroll-left").length; i++) {

        moveDiv = $(".scroll-left")[i];

        var startX;

        moveDiv.addEventListener('touchstart', function (ev) {

            ev.preventDefault();

            startX = ev.touches[0].pageX;

            startY = ev.touches[0].pageY;

        }, false);

        moveDiv.addEventListener('touchend', function (ev) {

            ev.preventDefault();

            var endX, endY;

            endX = ev.changedTouches[0].pageX;

            endY = ev.changedTouches[0].pageY;

            var direction = GetSlideDirection(startX, startY, endX, endY);

            switch (direction) {

                case 1:

                    $(this).next().animate({ right: "0" });

                    $(this).animate({ left: "-8em" });

                    break;

                case 2:

                    $(this).next().animate({ right: "-11rem" });

                    $(this).animate({ left: "0" });

                    break;

                default:

            }

        }, false);

    } 

})

function GetSlideAngle(dx, dy) {

    return Math.atan2(dy, dx) * 180 / Math.PI;

}

//根据起点和终点返回方向 1：向左，2：向右,

function GetSlideDirection(startX, startY, endX, endY) {

    var dy = startY - endY;

    var dx = endX - startX;

    var result = 0;

    //如果滑动距离太短

    if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {

        return result;

    }

    var angle = GetSlideAngle(dx, dy);

    if (angle >= -45 && angle < 45) {

        result = 2;

    } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {

        result = 1;

    }

    return result;

}

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

JS实现移动端购物车左滑删除功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
基于touch.js 左滑删除功能
左滑删除功能完整代码如下: (touch.js) <!DOCTYPE html> <html> <head> <meta charset="UTF ...
仿QQ列表左滑删除
一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...
微信小程序独家秘笈之左滑删除
代码地址如下:http://www.demodashi.com/demo/14056.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.co ...
Android开发学习之路-PopupWindow和仿QQ左滑删除
这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...
模仿QQ左滑删除
需求: 1.左滑删除 2.向左滑动距离超过一半的时候让它自动滑开,向右滑动超过一半的时候自动隐藏 3.一次只允许滑开一个item 还有,根本不需要自定义view来实现,谨防入坑布局: <?xm ...
tableView左滑删除功能
实现三个代理方法即可 -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtI ...
[转]ANDROID仿IOS微信滑动删除_SWIPELISTVIEW左滑删除例子
转载:http://dwtedx.sinaapp.com/itshare_290.html 本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除 ...
wex5 实战苹果左滑删除与长按编辑
用了多年苹果,习惯了苹果的左滑删除与长按编辑,特别是短信什么的,很多安卓界面也采用了类似方式. 我的想法突如其来,用wex5也设计一个这样的功能,可以吗? 那句广告词,没有什么不可能. 呵呵. 一 ...

随机推荐

如何在面试中介绍自己的项目经验（面向java改进版）
本人于3年前写的博文,如何在面试中介绍自己的项目经验,经过大家的捧场,陆续得到了将近7万个点击量,也得到了众多网站公众号的转载,不过自己感觉,这篇文章更多的是偏重于方法,没有具体给到Java方面相关的 ...
#2020征文-开发板# 用鸿蒙开发AI应用（二）系统篇
目录: 前言安装虚拟机安装 Ubuntu 设置共享文件夹前言上回说到,我们在一块 HarmonyOS HiSpark AI Camera 开发板,并将其硬件做了一下解读和组装.要在其上编译鸿蒙系 ...
【Problems】Could not set property 'id' of 'xxx' with value '' Cause argument type mismatch
一个问题:向comment表添加记录时,报错, 无法设置值. reflection.ReflectionException: Could not set property 'id' of 'class ...
【Oracle】delete表后commit后怎么找回，方法
有些时候,不小心删除了一些需要的表,而且数据库不能停止,只能一直运行下去,这样的话很麻烦下面介绍的方法就是删除表后通过时间戳后者scn找回删除的数据模拟实验环境: 创建一个新表 SQL> c ...
kubernets之pv以及pvc
一持久卷以及持久卷声明的由来由于不管是哪种卷,开发者都需要提前预知kubernets集群里面的存储类型,这样就在一定程度上违背了kubernets集群的设计理念,kubernets的设计理念是在由 ...
（数据科学学习手札104）Python+Dash快速web应用开发——回调交互篇（上）
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介这是我的系列教程Python+Dash快速web ...
阅读lodash源码之旅数组方法篇-compact和concat
鲁迅说过:只有阅读过优秀库源码的人,才能配的上是真正的勇士. compact 创建一个新数组,包含原数组中所有的非假值元素.例如false, null,0, "", undefin ...
30分钟带你理解 Raft 算法
为什么需要 Raft? Raft 是什么? Raft 的目标前置条件:复制状态机 Raft 基础 Leader 选举(选举安全特性) 日志复制(Leader只附加.日志匹配) 安全学习资料使用 ...
Linux网卡没有eth0显示ens33原因以及解决办法
原因首先说明下eth0与ens33的关系: 目前的主流网卡为使用以太网络协定所开发出来的以太网卡 (Ethernet),因此我们 Linux 就称呼这种网络接口为 ethN (N 为数字). 举例来 ...
PAT甲级1056Mice and Rice
目录题目介绍题解解题思路代码参考链接题目介绍题目链接 https://pintia.cn/problem-sets/994805342720868352/problems/9948054 ...

js实现购物车左滑删除

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

随机推荐

热门专题