当前位置： 首页 > news >正文

js侧滑显示删除按钮

news 文章来源：https://blog.csdn.net/weixin_44694682/article/details/129236083 2024/11/24 9:05:36

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>js侧滑显示删除按钮</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;font-size: .14rem;background: #e9e9e9;}li {list-style: none;}i {font-style: normal;}a {color: #393939;text-decoration: none;}.list_box{overflow: auto;height: 92vh;}.list {overflow: hidden;margin-top: .2rem;margin: .3rem;}.list .list_img {width: 1.8rem;height: 1.8rem;float: left;background: #000;}.list li {overflow: hidden;width: 128%;height: 1.8rem;border-bottom: 1px solid #eee;background: #fff;/* padding-left: 0.2rem; */}.list li a {display: block;height: 1.4rem;/* line-height: 1.4rem; */-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}.list li i {float: right;width: 1.8rem;height: 1.9rem;line-height: 1.9rem;background: #E2421B;color: #fff;text-indent: 0.38rem;}.swipeleft {transform: translateX(-15%);-webkit-transform: translateX(-15%);}.top_box {height: 0.9rem;display: flex;justify-content: space-around;align-items: center;background: #fff;}.top_box span {display: inline-block;height: 0.8rem;line-height: 0.8rem;padding: 0 2px;font-family: Microsoft Yahei, sans-serif;font-size: 14px;}.text_size {float: left;width: 55%;font-size: 14px;padding: 10px 5px 0 5px;}.text_size .span {width: 100%;display: inline-block;font-weight: bold;overflow: hidden;text-overflow: ellipsis;/* 将对象作为弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 *//* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;}.text_size p {padding-top: 10px;}</style><script>//计算根节点HTML的字体大小function resizeRoot() {var deviceWidth = document.documentElement.clientWidth,num = 750,num1 = num / 100;if (deviceWidth > num) {deviceWidth = num;}document.documentElement.style.fontSize = deviceWidth / num1 + "px";}//根节点HTML的字体大小初始化resizeRoot();window.onresize = function () {resizeRoot();};</script>
</head><body><div class="top_box"><span class="top_box_l">商品收藏</span><span class="top_box_r" style="border-bottom: 2px solid red;">积分商品收藏</span></div><div class="list_box"><div class="list"><ul><li><a href="#"><div class="list_img"><img src="https://wanfeng-images.oss-cn-hangzhou.aliyuncs.com/fileupload/20220427/165104494531186.jpg"alt="" style="width:100%;height:100%;"></div><div class="text_size"><span class="span">晚峰书屋清明上河图书签中国风创意古风纸质纪念品礼品制作小礼物</span><p><span style="text-decoration: line-through;color: #a5a5a5;font-size: 12px;">1.00</span> <span style="display: inline-block;color: #333;font-size: 14px;padding-left: 5px;font-weight: bold;">580积分+￥48.00</span></p></div><i>删除</i></a></li></ul><p style="text-align: center;padding:15px 0;">没有更多内容了</p></div></div><script>//侧滑显示删除按钮var expansion = null; //是否存在展开的listvar container = document.querySelectorAll('.list li a');for (var i = 0; i < container.length; i++) {var x, y, X, Y, swipeX, swipeY;container[i].addEventListener('touchstart', function (event) {x = event.changedTouches[0].pageX;y = event.changedTouches[0].pageY;swipeX = true;swipeY = true;if (expansion) {   //判断是否展开，如果展开则收起expansion.className = "";}});container[i].addEventListener('touchmove', function (event) {X = event.changedTouches[0].pageX;Y = event.changedTouches[0].pageY;// 左右滑动if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {// 阻止事件冒泡event.stopPropagation();if (X - x > 10) {   //右滑event.preventDefault();this.className = "";    //右滑收起}if (x - X > 10) {   //左滑event.preventDefault();this.className = "swipeleft";   //左滑展开expansion = this;}swipeY = false;}// 上下滑动if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {swipeX = false;}});}</script>
</body></html>

相关文章：

js侧滑显示删除按钮

效果图&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno"><title>js侧滑显示删…...

编程日记 2023/2/28 21:58:27

Python - DIY - 使用dump取json某些键值对合成新的json文件

Python - Json处理前言&#xff1a;应用场景&#xff1a;基本工具&#xff1a;文件操作&#xff1a;打开文件&#xff1a;写文件&#xff1a;读文件&#xff1a;关闭文件并刷新缓冲区&#xff1a;Json字符串和字典转换&#xff1a;json.loads()&#xff1a;json.dumps():Json文…...

编程日记 2023/4/2 2:20:09

深度剖析指针（中）——“C”

各位CSDN的uu们你们好呀&#xff0c;今天小雅兰的内容仍旧是深度剖析指针噢&#xff0c;在上一篇博客中&#xff0c;我已经写过了字符指针、数组指针、指针数组、数组传参和指针传参的知识点&#xff0c;那么这篇博客小雅兰会讲解一下函数指针、函数指针数组 、指向函数指针数组…...

编程日记 2023/3/21 11:07:13

论文阅读 | Video Frame Synthesis using Deep Voxel Flow

前言&#xff1a; 视频帧生成方法&#xff08;视频插帧/视频预测&#xff09;ICCV2017 oral Video Frame Synthesis using Deep Voxel Flow 引言 当下进行视频帧合成的方法分为两种&#xff0c;第一种是光流法&#xff0c;光流准确的话效果好&#xff0c;光流不准确的话则生…...

编程日记 2023/3/21 22:08:04

我所理解的生活

诞生 人真正意义上的诞生应该是社会学意义上的&#xff0c;是一种意识到自我、自我与社会关系的存在&#xff0c;只有这种诞生&#xff0c;才是完整人生的基点&#xff0c;大千世界中&#xff0c;唯有人类以生活作为自己的存在方式&#xff0c;除人类以外&#xff0c;从无机界…...

编程日记 2023/3/31 23:59:46

debian 部署nginx https

我是flask 处理请求单进程&#xff0c; 差点意思 &#xff0c; 考虑先flask 在往下走 一&#xff1a;安装nginx 因为我是debian 系统&#xff0c;所以我的建议是直接 sudo apt-get install nginx 你也可以选择在官网下载&#xff0c; 但是我搭建ssl 的时候安装openssl非常的麻…...

编程日记 2023/4/1 15:15:42

SQL 层功能改进 - lookupJoin 的优化

一、传统 join 算法lookupJoin 是 join 查询的一种&#xff0c;传统 join 算法为&#xff1a;1. 遍历 A 表&#xff0c;读取一条数据 r2. 遍历 B 表&#xff0c;对于每条数据&#xff0c;与 r 进行 join 操作3. 重复 1、2 操作&#xff0c;直到 A 表遍历完所有数据二、lookupJo…...

编程日记 2023/4/2 2:20:07

动态规划：鸣人的影分身

在火影忍者的世界里&#xff0c;令敌人捉摸不透是非常关键的。我们的主角漩涡鸣人所拥有的一个招数——多重影分身之术——就是一个很好的例子。影分身是由鸣人身体的查克拉能量制造的&#xff0c;使用的查克拉越多&#xff0c;制造出的影分身越强。针对不同的作战情况&#xf…...

编程日记 2023/2/28 21:49:19

如何为三星active2手表安装自己DIY的表盘

一、步骤介绍 Step 1. 下载Galaxy watch studio&#xff1b; Step 2. 按照up主“隔壁张师傅2022”的文章进行安装。 二、安装流程简单说明&#xff1a; ① 电脑端官网下载并安装Galaxy Watch Designer或者Galaxy Watch Studio程序。 ② 关闭手表蓝牙连接&#xff0c;并打开调…...

编程日记 2023/4/1 0:00:58

Android 项目必备（四十二）--＞Android 多窗口模式

简介 自由窗口模式: 该模式类似于常见的桌面操作系统&#xff0c; 应用界面的窗口可以自由的拖动和修改大小。 分屏模式 该模式可以在手机上使用&#xff0c; 该模式将屏幕一分为二&#xff0c; 同时显示两个应用界面。 画中画模式: 该模式主要用于TV&#xff0c; 在该模式下…...

编程日记 2023/2/28 21:46:46

OpenHarmony的未来和如何做好一个开源社区

今天要分享的文章&#xff0c;可能更多只是作为一种观点。主要包括2个内容。OpenHarmony的未来和如何做好一个开源社区&#xff0c;好的&#xff0c;接下来开始今天的内容。 你对OpenHarmony的未来如何看待&#xff1f; OpenHarmony的未来看起来非常光明&#xff0c;因为它具…...

编程日记 2023/2/28 21:45:35

二叉搜索树实现

树的导览 树由节点&#xff08;nodes&#xff09;和边&#xff08;edges&#xff09;构成&#xff0c;如下图所示。整棵树有一个最上端节点&#xff0c;称为根节点&#xff08;root&#xff09;。每个节点可以拥有具有方向的边&#xff08;directed edges&#xff09;&#xf…...

编程日记 2023/4/1 0:02:13

解决Spring Data Jpa 实体类自动创建数据库表失败问题

先说一下我遇到的这个问题&#xff0c;首先我是通过maven创建了一个spring boot的工程&#xff0c;引入了Spring data jpa&#xff0c;结果实体类创建好之后&#xff0c;运行工程却没有在数据库中自动创建数据表。 找了半天发现是一个配置的问题! hibernate.ddl-auto节点的配…...

编程日记 2023/3/22 13:33:57

Elasticsearch：创建一个简单的 “你的意思是？” 推荐搜索

“你的意思是” 是搜索引擎中一个非常重要的功能&#xff0c;因为它们通过显示建议的术语来帮助用户&#xff0c;以便他可以进行更准确的搜索。比如&#xff0c;在百度中&#xff0c;我们进行搜索时&#xff0c;它通常会显示一些更为常用推荐的搜索选项来供我们选择&#xff1a…...

编程日记 2023/2/28 21:42:05

urllib之ProxyHandler代理以及CookieJar的cookie内存传递和本地保存与读取的使用详解

处理更高级操作时(Cookies处理&#xff0c;代理设置)&#xff0c;需要一个强大的工具Handler&#xff0c;可以理解成各种处理器&#xff0c;有处理登录认证的、有处理Cookies的、有处理代理设置的。利用这些几乎可以做到HTTP请求中所有事情。当中urllib.request模块里的 BaseHa…...

编程日记 2023/3/21 11:07:46

华为造车锚定智选模式， 起点赢家赛力斯驶入新能源主航道

文|螳螂观察 作者| 易不二 近日&#xff0c;赛力斯与华为的一纸联合业务深化合作协议&#xff0c;给了频频猜测赛力斯与华为之间关系的舆论一个明确的定调&#xff1a;智选模式已成为华为与赛力斯共同推动中国新能源汽车产业高质量发展的坚定选择。 自华为智能汽车业务开启零…...

编程日记 2023/4/1 0:05:12

[oeasy]python0096_游戏娱乐行业_雅达利_米洛华_四人赛马_影视结合游戏

游戏娱乐行业 回忆上次内容 游戏机行业从无到有 雅达利 公司 一枝独秀并且带领 行业 发展起来 雅达利公司 优秀员工 乔布斯 在 朋友 帮助下完成了《pong》 Jobs 黑了 Woz 一部分收入 然后拿着钱 去印度禅修了 游戏行业 会如何继续 呢&#xff1f;?&#x1f914; 灵修 乔布…...

编程日记 2023/4/3 2:53:17

使用python测试框架完成自动化测试并生成报告-实例练习

练习一: 使用unittest 完成自动化测试并使用HttpTestRunner生成报告 1、写个简单的计算器功能&#xff0c;大小写转换功能&#xff0c;随机生成字符串功能 2、编写测试用例&#xff0c;不同的数据&#xff08;你能想到的所有测试用例&#xff09;&#xff0c;并进行断言。除0的…...

编程日记 2023/2/28 21:37:11

JavaWeb 实战 01 - 计算机是如何工作的

计算机是如何工作的1. 计算机发展史2. 计算机的基本组成2.1 冯诺依曼体系结构2.2 CPU的内部结构2.3 指令2.3.1 指令表2.3.1.1 寄存器2.3.2 CPU的工作流程2.4 小结3. 操作系统3.1 核心功能3.2 操作系统的软硬件结构3.3 什么是进程 / 任务3.4 进程管理3.4.1 管理3.4.2 PCB : 进程…...

编程日记 2023/4/1 0:07:36

线性代数学习-1

线性代数学习-1行图像和列图像行图像列图像总结本文转载于https://herosunly.blog.csdn.net/article/details/88698381 该文章本人认为十分有用&#xff0c;便自己敲一遍笔记加固印象原文链接 原文这个笔记感觉比我老师讲的更加透彻&#xff0c;清晰。很好的展示了线性代数的原…...

编程日记 2023/2/28 21:34:37

人工智能写的十段代码，九个通过测试了

“抢走你工作的不会是 AI &#xff0c;而是先掌握 AI 能力的人” 编程测试 1. 我想用golang实现二叉树前序&#xff0c;请你帮我写一下代码。 // 定义二叉树节点 type TreeNode struct {Val intLeft *TreeNodeRight *TreeNode }// 前序遍历 func PreOrderTraversal(root *Tre…...

编程日记 2023/2/28 21:33:26

巴塞尔问题数值逼近方法

巴塞尔问题&#xff1a;计算所有平方数的导数和 ∑n1∞1n2lim⁡n→∞(112122⋯1n2)\sum_{n1}^{\infty} \frac{1}{n^{2}}\lim _{n \rightarrow\infty}\left(\frac{1}{1^{2}}\frac{1}{2^{2}}\cdots\frac{1}{n^{2}}\right)n1∑∞​n21​n→∞lim​(121​221​⋯n21​) 其理论解为…...

编程日记 2023/4/1 0:08:25

【深度学习环境】Docker

1. Docker 相关安装配置 1.1 docker 安装 参考&#xff1a;https://www.runoob.com/docker/ubuntu-docker-install.html 1.2 nvidia-docker 安装 参考&#xff1a;https://zhuanlan.zhihu.com/p/37519492 1.3 代理加速 参考&#xff1a;https://yeasy.gitbook.io/docker_…...

编程日记 2023/2/28 21:31:04

基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 目录 六、第三方图标库FontAwesome 1 安装FontAwesome 解决报…...

编程日记 2023/4/2 14:39:37

今天面了个腾讯拿25K出来的软件测试工程师，让我见识到了真正的天花板...

今天上班开早会就是新人见面仪式&#xff0c;听说来了个很厉害的大佬&#xff0c;年纪还不大&#xff0c;是上家公司离职过来的&#xff0c;薪资已经达到中高等水平&#xff0c;很多人都好奇不已&#xff0c;能拿到这个薪资应该人不简单&#xff0c;果然&#xff0c;自我介绍的…...

编程日记 2023/2/28 21:28:17

OSG三维渲染引擎编程学习之六十九：“第六章：OSG场景工作机制” 之 “6.9 OSG数据变量”

目录 第六章 OSG场景工作机制 6.9 OSG数据变量 第六章 OSG场景工作机制 作为一个成熟的三维渲染引擎，需要提供快速获取场景数据、节点等信息，具备自定义数据或动画更新接口，能接收应用程序或窗口等各类消息。OSG三维渲染引擎能较好地完成上述工作，OSG是采用什么方式或工作…...

编程日记 2023/2/28 21:27:08

Tektronix泰克TDP3500差分探头3.5GHz

附加功能&#xff1a; 带宽&#xff1a;3.5 GHz 差分输入电容&#xff1a;≤0.3 pF 差分输入电阻&#xff1a;100 kΩ DC pk 交流输入电压&#xff1a;15 V >60 dB 在 1 MHz 和 >25 dB 在 1 GHz CMRR 出色的共模抑制——减少较高共模环境中的测量误差 低电容和电阻负载…...

编程日记 2023/2/28 21:25:58

轻松实现内网穿透：实现远程访问你的私人网络

导语&#xff1a;内网穿透是什么&#xff1f;为什么我们需要它&#xff1f;今天我们将介绍这个令人惊叹的技术&#xff0c;让你实现远程访问你的私人网络。 使用内网穿透&#xff0c;轻松实现外网访问本地部署的网站 第一部分&#xff1a;什么是内网穿透&#xff1f; 通俗解释…...

编程日记 2023/2/28 21:24:34

MySQL长字符截断

MySQL超长字符截断又名"SQL-Column-Truncation"&#xff0c;是安全研究者Stefan Esser在2008 年8月提出的。 在MySQL中的一个设置里有一个sql_mode选项&#xff0c;当sql_mode设置为default时&#xff0c;即没有开启STRICT_ALL_TABLES选项时&#xff08;MySQLsql_mo…...

编程日记 2023/2/28 21:23:23

python计算量比指标

百度百科是这么写的&#xff1a;量比定义&#xff1a;股市开市后平均每分钟的成交量与过去5个交易日平均每分钟成交量之比。计算公式&#xff1a;量比&#xff08;现成交总手数 / 现累计开市时间(分) &#xff09;/ 过去5日平均每分钟成交量。这里公式没有问题&#xff0c;但是…...

编程日记 2023/2/28 21:22:01

wordpress手机上打不开/网络推广软件哪个好

这几天在项目中经常用到缓存&#xff0c;干脆就对这个缓存做了一个简单的封装　&#xff0c;今后直接那俩用就行了&#xff1b; public class SiteCache { #region 方法 private static readonly Cache _cache; public static readonly int HourFactor…...

编程日记 2024/11/24 8:50:34

深广纵横设计公司官网/网站seo公司哪家好

本篇紧随上篇&#xff0c;探讨一下OpenGL内置的拾取机制&#xff0c;给出一个完整的拾取部分实现代码&#xff0c;请有心人批评指正。前篇是:[乱弹OpenGL选择-拾取机制(上)] ——ZwqXin.com 前篇主要讲了名字栈机制&#xff0c;这是拾取机制中对拾取结果进行识别的机制&#x…...

编程日记 2024/11/24 6:09:59

柳州在哪里做网站/上海哪家seo好

春天到来前&#xff0c;5G正在准备搞点大事情。就在前两天&#xff0c;特朗普又专门为5G发推特&#xff0c;强调美国要尽快发展5G&#xff0c;并且强调要靠竞争而不是封杀来发展技术。这里咱们放下特朗普的内心戏暂且不表&#xff0c;至少美国总统频频发声&#xff0c;证明了5G…...

编程日记 2024/11/24 4:04:22

企业招聘网站模板/联赛积分榜排名

1.web存储&#xff0c;是一种可以通过字符串形式的键值对来安全的存储和使用数据的方法。它可以同时在线和连线使用的网络程序。 2.web存储和另外一种 HTTP Cookie的区别 容量不同:web存储容量更大更安全 更易于使用&#xff0c;cookie至多存储4kB信息&#xff0c;web存储可以达…...

编程日记 2024/11/24 0:24:23

石家庄网站建设seo优化营销/网站建设需要多少钱

2017第五届CCF大数据与计算智能大赛(BDCI)启动仪式于本9月24日正式启动。 CCF大数据与计算智能大赛(Big Data & Computing Intelligence Contest,简称“BDCI”)是由中国计算机学会(CCF)主办&#xff0c;中国计算机学会大数据专家委员会(CCF-TFBD)、中国计算机学会高性能计算…...

编程日记 2024/11/24 0:16:11

asp制作网站教程/推广普通话作文

文章目录前言1. 题目2. 题目分析3. 四个python内置函数3.1 lower()方法3.2 ord()方法3.3 bin()方法3.4 count()方法4. 代码前言 再一次感受到了python的强大&#xff0c;这个题这么复杂的操作&#xff0c;python只用了4个函数&#xff0c;12行就搞定了。这次总结一下这4个函数…...

编程日记 2024/11/23 21:35:05