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;
}
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实现购物车左滑删除的更多相关文章
- 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也设计一个这样的功能,可以吗? 那句广告词,没有什么不可能. 呵呵. 一 ...
随机推荐
- LeetCode198--打家劫舍问题
题目 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给定一个 ...
- oracle坚决不挂01（表，索引，视图的创建，修改，删除，查询）
考试快来了,来篇oracle干货,复习一下(挣扎一下) 废话不多说,开始写! 这篇是数据库对象的有关操作的总结! 数据库对象有熟悉的表,视图,索引,序列,同义词等(这个oracle东西真不少,小声bb ...
- Mybatis 报错java.sql.SQLException: No suitable driver found for http://www.example.com
运行项目报错 Error querying database. Cause: java.sql.SQLException: No suitable driver found for http://ww ...
- 纯原生javascript下拉框表单美化实例教程
html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...
- 奇技淫巧，还是正统功夫？ - Python推导式最全用法
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资 ...
- SQL Server management studio使用sa连接时报错与伺服器的连接已成功,但在登入程序是发生错误
使用Sql Server management studio的sa用户连接数据库时,报如下错误 解决方法: 1.使用windows验证登录 2.右键点击连接,点击属性,点击安全性,选择混合验证 3.重 ...
- 基于scrapy框架的分布式爬虫
分布式 概念:可以使用多台电脑组件一个分布式机群,让其执行同一组程序,对同一组网络资源进行联合爬取. 原生的scrapy是无法实现分布式 调度器无法被共享 管道无法被共享 基于 scrapy+redi ...
- NAT模式、路由模式、桥接模式的区别
NAT模式 NAT模式概述 NAT是"Network Address Translation"的缩写,中文意思是"网络地址转换",它允许一个整体机构以一个公用I ...
- 【转载】Linux中找不到ifconfig命令的解决方法
ifconfig命令出错 ifconfig命令是设置或显示网络接口的程序,可以显示出我们机器的网卡信息,可是有些时候最小化安装CentOS等Linux发行版的时候会默认不安装ifconfig等命令,这 ...
- nothreading use single threaded
threading: # ThreadingMixIn.daemon_threads indicates how threads will behave on an # abrupt shut ...