移动端滑动删除

╰半夏微凉° 2022-03-14 13:52 361阅读 0赞

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70

演示DEMO：http://www.bright2017.top/test1/test1-33/

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="flexible" content="initial-dpr=2" />
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <meta name="author" content="Bright2017" />
  9.         <meta name="Keywords" content="bright2017" />
  10.         <meta name="Description" content="bright2017练习" />
  11.         <title>优惠券</title>
  12.         <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  13.         <style type="text/css">
  14.             *{box-sizing: border-box;}
  15.             .floatLeft{float: left;}
  16.             .floatRight{float: right;}
  17.             .alignItemsCenter{display: flex;justify-content: center;align-items: center;}
  18.             .overHidden{width: 100%;overflow: hidden;}
  19.             .myCoupon>div:first-child{font-size: 0.5rem;text-align: center;line-height: 2;padding-top: 0.3rem;}
  20.             .myCoupon{max-width: 750px;margin: 0 auto;}
  21.             .myCoupon-top{padding: 0.5rem 0.3rem 0.3rem 0.3rem;}
  22.             .myCoupon-top>div{width: 25%;text-align: center;}
  23.             .myCoupon-bot{padding: 0.3rem;color: #ffffff;}
  24.             .myCouponCentD-top{border-bottom: 1px dashed #ffffff;padding: 0.4rem;}
  25.             .myCouponCentD-bot{padding: 0.2rem 0.4rem;}
  26.             .myCouponCentD-top-left{width: 2rem;}
  27.             .myCouponCentD-top-left>div:first-child{font-size: 0.324rem;padding-top: 0.35rem;}
  28.             .myCouponCentD-top-left>div:last-child{font-size: 0.81rem;}
  29.             .myCouponCentD-top-right>div:first-child{line-height: 1.5;font-size: 0.324rem;}
  30.             .myCouponCentD-top-right>div:last-child{background-color: #ffffff;color: #fe596e;font-size: 0.378rem;padding: 0.2rem 0.3rem;}
  31.             .myCouponCentD-top-right{width: calc(100% - 2rem);}
  32.             .myCouponCentD-bot>div{width: calc(100% - 0.351rem);line-height: 1.5;}
  33.             .myCouponCentD-bot>img{width: 0.351rem;}
  34.             .myCoupon-bot>div{margin-bottom: 0.8rem;height: 3.05rem;}
  35.             .myCoupon-img{width: 2.1rem;position: absolute;top: 0.8rem;right: 1rem;z-index: 2;}
  36.             .touchleft-coupon{width: 100%;height: 100%;position: relative;}
  37.             .touchright-coupon{width: 2rem;height: 3.18rem;}
  38.             .touchright-coupon>img{width: 0.405rem;}
  39.             .activeCoupon{margin-left: -2rem;}
  40.         </style>
  41.     </head>
  42.     <body>
  43.         <div class="myCoupon">
  44.             <div>
  45.                 请按F12移动端模拟查看效果
  46.             </div>
  47.             <div class="myCoupon-bot">
  48.                 <div class="overHidden myCouponDat">
  49.                     <div class="touchleft-coupon floatLeft" style="background: url(img/img56.png) no-repeat;background-position: center;background-size: 100% 100%;">
  50.                         <div class="myCouponCentD-top overHidden">
  51.                             <div class="myCouponCentD-top-left floatLeft">
  52.                                 <div class="floatLeft">￥</div>
  53.                                 <div class="floatLeft">50</div>
  54.                             </div>
  55.                             <div class="myCouponCentD-top-right floatLeft">
  56.                                 <div class="floatLeft">
  57.                                     <div>全场满800减50</div>
  58.                                     <div>有效期:2019.01.18-2019.01.19</div>
  59.                                 </div>
  60.                                 <div class="floatRight">去使用</div>
  61.                             </div>
  62.                         </div>
  63.                         <div class="myCouponCentD-bot overHidden">
  64.                             <div class="floatLeft">
  65.                                 说明:此优惠券最终解释在惠券最终解释权在此优惠券最终解释权在此优惠券最终解释权在此优惠券最终解释权在
  66.                             </div>
  67.                             <img src="img/img62.png" alt="图片丢失" class="floatRight" />
  68.                         </div>
  69.                         <img src="img/img57.png" alt="图片丢失" class="hide myCoupon-img" />
  70.                     </div>
  71.                     <div class="touchright-coupon alignItemsCenter floatLeft">
  72.                         <img src="img/img63.png" alt="图片丢失" />
  73.                     </div>
  74.                 </div>
  75.                 <div class="overHidden myCouponDat">
  76.                     <div class="touchleft-coupon floatLeft" style="background: url(img/img58.png) no-repeat;background-position: center;background-size: 100% 100%;">
  77.                         <div class="myCouponCentD-top overHidden">
  78.                             <div class="myCouponCentD-top-left floatLeft">
  79.                                 <div class="floatLeft">￥</div>
  80.                                 <div class="floatLeft">50</div>
  81.                             </div>
  82.                             <div class="myCouponCentD-top-right floatLeft">
  83.                                 <div class="floatLeft">
  84.                                     <div>全场满800减50</div>
  85.                                     <div>有效期:2019.01.18-2019.01.19</div>
  86.                                 </div>
  87.                                 <div class="floatRight">去使用</div>
  88.                             </div>
  89.                         </div>
  90.                         <div class="myCouponCentD-bot overHidden">
  91.                             <div class="floatLeft">
  92.                                 说明:此优惠券最终解释在惠券最终解释权在此优惠券最终解释权在此优惠券最终解释权在此优惠券最终解释权在
  93.                             </div>
  94.                             <img src="img/img62.png" alt="图片丢失" class="floatRight" />
  95.                         </div>
  96.                         <img src="img/img59.png" alt="图片丢失" class="hide myCoupon-img" />
  97.                     </div>
  98.                     <div class="touchright-coupon alignItemsCenter floatLeft">
  99.                         <img src="img/img63.png" alt="图片丢失" />
  100.                     </div>
  101.                 </div>
  102.                 <div class="overHidden myCouponDat">
  103.                     <div class="touchleft-coupon floatLeft" style="background: url(img/img61.png) no-repeat;background-position: center;background-size: 100% 100%;">
  104.                         <div class="myCouponCentD-top overHidden">
  105.                             <div class="myCouponCentD-top-left floatLeft">
  106.                                 <div class="floatLeft">￥</div>
  107.                                 <div class="floatLeft">50</div>
  108.                             </div>
  109.                             <div class="myCouponCentD-top-right floatLeft">
  110.                                 <div class="floatLeft">
  111.                                     <div>全场满800减50</div>
  112.                                     <div>有效期:2019.01.18-2019.01.19</div>
  113.                                 </div>
  114.                                 <div class="floatRight">去使用</div>
  115.                             </div>
  116.                         </div>
  117.                         <div class="myCouponCentD-bot overHidden">
  118.                             <div class="floatLeft">
  119.                                 说明:此优惠券最终解释在惠券最终解释权在此优惠券最终解释权在此优惠券最终解释权在此优惠券最终解释权在
  120.                             </div>
  121.                             <img src="img/img62.png" alt="图片丢失" class="floatRight" />
  122.                         </div>
  123.                         <img src="img/img57.png" alt="图片丢失" class="hide myCoupon-img" />
  124.                     </div>
  125.                     <div class="touchright-coupon alignItemsCenter floatLeft">
  126.                         <img src="img/img63.png" alt="图片丢失" />
  127.                     </div>
  128.                 </div>
  129.                 <div class="overHidden myCouponDat">
  130.                     <div class="touchleft-coupon floatLeft" style="background: url(img/img56.png) no-repeat;background-position: center;background-size: 100% 100%;">
  131.                         <div class="myCouponCentD-top overHidden">
  132.                             <div class="myCouponCentD-top-left floatLeft">
  133.                                 <div class="floatLeft">￥</div>
  134.                                 <div class="floatLeft">50</div>
  135.                             </div>
  136.                             <div class="myCouponCentD-top-right floatLeft">
  137.                                 <div class="floatLeft">
  138.                                     <div>全场满800减50</div>
  139.                                     <div>有效期:2019.01.18-2019.01.19</div>
  140.                                 </div>
  141.                                 <div class="floatRight">去使用</div>
  142.                             </div>
  143.                         </div>
  144.                         <div class="myCouponCentD-bot overHidden">
  145.                             <div class="floatLeft">
  146.                                 说明:此优惠券最终解释在惠券最终解释权在此优惠券最终解释权在此优惠券最终解释权在此优惠券最终解释权在
  147.                             </div>
  148.                             <img src="img/img62.png" alt="图片丢失" class="floatRight" />
  149.                         </div>
  150.                         <img src="img/img57.png" alt="图片丢失" class="hide myCoupon-img" />
  151.                     </div>
  152.                     <div class="touchright-coupon alignItemsCenter floatLeft">
  153.                         <img src="img/img63.png" alt="图片丢失" />
  154.                     </div>
  155.                 </div>
  156.                 <div class="overHidden myCouponDat">
  157.                     <div class="touchleft-coupon floatLeft" style="background: url(img/img56.png) no-repeat;background-position: center;background-size: 100% 100%;">
  158.                         <div class="myCouponCentD-top overHidden">
  159.                             <div class="myCouponCentD-top-left floatLeft">
  160.                                 <div class="floatLeft">￥</div>
  161.                                 <div class="floatLeft">50</div>
  162.                             </div>
  163.                             <div class="myCouponCentD-top-right floatLeft">
  164.                                 <div class="floatLeft">
  165.                                     <div>全场满800减50</div>
  166.                                     <div>有效期:2019.01.18-2019.01.19</div>
  167.                                 </div>
  168.                                 <div class="floatRight">去使用</div>
  169.                             </div>
  170.                         </div>
  171.                         <div class="myCouponCentD-bot overHidden">
  172.                             <div class="floatLeft">
  173.                                 说明:此优惠券最终解释在惠券最终解释权在此优惠券最终解释权在此优惠券最终解释权在此优惠券最终解释权在
  174.                             </div>
  175.                             <img src="img/img62.png" alt="图片丢失" class="floatRight" />
  176.                         </div>
  177.                         <img src="img/img57.png" alt="图片丢失" class="hide myCoupon-img" />
  178.                     </div>
  179.                     <div class="touchright-coupon alignItemsCenter floatLeft">
  180.                         <img src="img/img63.png" alt="图片丢失" />
  181.                     </div>
  182.                 </div>
  183.             </div>
  184.         </div>
  185.         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  186.         <script type="text/javascript">
  187.             window.onload = function() {
  188.                 var touch = new Touch(document.getElementsByClassName("myCouponDat"), 40).init();
  189.                 //向左滑动触发事件
  190.                 touch.swipeLeft = function(dom) {
  191.                     var clasname = dom.getElementsByClassName("touchleft-coupon")[0];
  192.                     // js添加类名
  193.                     clasname.classList.add("activeCoupon");
  194.                     console.log("向左滑动~~~",clasname);
  195.                 };
  196.                 //向右滑动事件
  197.                 touch.swipeRight = function(dom) {
  198.                     var clasname = dom.getElementsByClassName("touchleft-coupon")[0];
  199.                     // js添加类名
  200.                     clasname.classList.remove("activeCoupon");
  201.                     console.log("向右滑动~~~");
  202.                 }
  203.             };
  204.             function Touch(dom, range) {
  205.                 this.init = function() {
  206.                     var that = this;
  207.                     for (var i = 0; i < dom.length; i++) {
  208.                         (function(dom) {
  209.                             function touchstart(event) {
  210.                                 var e = event || window.event;
  211.                                 if (e.targetTouches.length === 1) {
  212.                                     var startX = e.targetTouches[0].clientX,
  213.                                         startY = e.targetTouches[0].clientY;
  214.                                     function touchmove(e) {
  215.                                         var moveEndX = e.targetTouches[0].clientX,
  216.                                             moveEndY = e.targetTouches[0].clientY;
  217.                                         if ((that.getAngle(startX, startY, moveEndX, moveEndY) >= 135 || that.getAngle(startX, startY, moveEndX,
  218.                                                 moveEndY) <= -135) && that.getRange(startX, startY, moveEndX, moveEndY) >= range) {
  219.                                             that.swipeLeft(dom);
  220.                                             dom.removeEventListener("touchmove", touchmove);
  221.                                         } else if ((that.getAngle(startX, startY, moveEndX, moveEndY) >= -45 && that.getAngle(startX, startY,
  222.                                                 moveEndX, moveEndY) <= 45) && that.getRange(startX, startY, moveEndX, moveEndY) >= range) {
  223.                                             that.swipeRight(dom);
  224.                                             dom.removeEventListener("touchmove", touchmove);
  225.                                         }
  226.                                     }
  227.                                     function touchend() {
  228.                                         dom.removeEventListener("touchend", touchend);
  229.                                         dom.removeEventListener("touchmove", touchmove);
  230.                                     }
  231.                                     dom.addEventListener("touchmove", touchmove);
  232.                                     dom.addEventListener("touchend", touchend);
  233.                                 }
  234.                             }
  235.                             dom.addEventListener("touchstart", touchstart);
  236.                         })(dom[i]);
  237.                     }
  238.                     return this;
  239.                 };
  240.                 //计算滑动的角度
  241.                 this.getAngle = function(px1, py1, px2, py2) {
  242.                     //两点的x、y值
  243.                     x = px2 - px1;
  244.                     y = py2 - py1;
  245.                     hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
  246.                     //斜边长度
  247.                     cos = x / hypotenuse;
  248.                     radian = Math.acos(cos);
  249.                     //求出弧度
  250.                     angle = 180 / (Math.PI / radian);
  251.                     //用弧度算出角度
  252.                     if (y < 0) {
  253.                         angle = -angle;
  254.                     } else if ((y == 0) && (x < 0)) {
  255.                         angle = 180;
  256.                     }
  257.                     return angle;
  258.                 };
  259.                 //计算两点之间的距离
  260.                 this.getRange = function(px1, py1, px2, py2) {
  261.                     return Math.sqrt(Math.pow(Math.abs(px1 - px2), 2) + Math.pow(Math.abs(py1 - py2), 2));
  262.                 };
  263.                 this.swipeLeft = function(dom) {};
  264.                 this.swipeRight = function(dom) {}
  265.             }
  266.             // 点击删除
  267.             $(".touchright-coupon").click(function() {
  268.                 alert("删什么删,给我合上!!!")
  269.             });
  270.         </script>
  271.     </body>
  272. </html>

参考博客：https://blog.csdn.net/qq_30100043/article/details/70229412

发表评论

表情：
评论列表 （有 0 条评论，361人围观）

还没有评论，来说两句吧...

相关阅读

    相关 移动端滑动事件方法

    今天使用jquery.fullpage.js的时候，发现移动端调试不支持滑动事件，于是自己写了一个滑动的事件，如下，使用这个插件时只需要给window绑定一个滑动事件就可以了，

    Dear 丶Dear 丶/ 0 赞/ 298 阅读

    相关 移动端滑动

    前言 移动端，滑动是很常见的需求。很多同学都用过[swiper.js][]，本文从原理出发，实践出一个类swiper的滑动小插件[ice-skating][]。 小插件

    以你之姓@以你之姓@/ 0 赞/ 405 阅读