使用 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;
}

js

$(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实现购物车左滑删除的更多相关文章

  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. Second_week_mofangzhen

    第二周 奇数阶魔方阵 一.上节回顾 1.数组的基本操作 数组:若干个相同类型变量的集合. 声明:数据类型 数组名称[]; (在栈内存分配空间,存储的是数组的引用地址.数组首元素在堆内存 中的地址) 初 ...

  2. windows环境搭建

    GO语言环境配置: 安装GOlang,添加到环境变量path 默认会创建环境变量GOPATH,其中存放代码和编译后的工程文件等,用户可以根据个人需要,在别的路径下创建gopath,并添加到环境变量中. ...

  3. Token验证的流程及如何准确的判断一个数据的类型

    Token验证的流程: 1,客户端使用用户名跟密码请求登录:2,服务端收到请求,去验证用户名与密码:3,验证成功后,服务端会签发一个 Token,再把这个 Token 发送给客户端:4,客户端收到 T ...

  4. Openstack neutron 网络服务 (七)

    引用: https://docs.openstack.org/ocata/zh_CN/install-guide-rdo/common/get-started-networking.html neut ...

  5. Kubernetes学习笔记之安装minikube并运行个简单应用程序

    前言:本笔记仅记录学习记录,可能存在错误!!!使用的环境是Ubuntu Desktop 20.04,也有用Windows 10 操作的,根据的文档是minikube的文档教程,链接:https://m ...

  6. Linux 中软链接和硬链接的使用

    Linux 链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link). 硬链接和软链接 硬链接 --- ln 要链接的文件 新硬链接名 软连接 --- l ...

  7. 【Oracle】密码文件相关

    Oracle数据库的orapwd命令,主要用来建立密码(口令)文件. 一.查看帮助信息 [oracle@oracle11g dbs]$ orapwd Usage: orapwd file=<fn ...

  8. VBA调用数独求解器

    我开发了一个用于求解数独的dll文件,只需要双击一下注册表文件,就可以在VBA中调用这个功能了.具体步骤如下: 下载:https://share.weiyun.com/5dpcNqx 找到ExcelS ...

  9. 消息队列之rabbitmq学习使用

    消息队列之rabbitmq学习使用 1.RabbitMQ简介 1.1.什么是RabbitMQ? RabbitMQ是一个开源的消息代理和队列服务器,用来通过普通协议在完全不同的应用之间共享数据,Rabb ...

  10. 彻底解决小程序无法触发SESSION问题

    一.首先找到第一次发起网络请求的地址,将服务器返回set-cookie当全局变量存储起来 wx.request({ ...... success: function(res) { console.lo ...