html5滑动删除置顶,html5向左滑动删除特效

html5向左滑动删除特效

* {

padding: 0;

margin: 0;

list-style: none;

}

header {

background: #f7483b;

border-bottom: 1px solid #ccc

}

header h2 {

text-align: center;

line-height: 54px;

font-size: 16px;

color: #fff

}

.list-ul {

overflow: hidden

}

.list-li {

line-height: 60px;

border-bottom: 1px solid #fcfcfc;

position: relative;

padding: 0 12px;

color: #666;

background: #f2f2f2;

-webkit-transform: translateX(0px);

}

.btn {

position: absolute;

top: 0;

right: -80px;

text-align: center;

background: #ffcb20;

color: #fff;

width: 80px

}

/*

* 描述:html5苹果手机向左滑动删除特效

*/

window.addEventListener('load', function() {

var initX; //触摸位置

var moveX; //滑动时的位置

var X = 0; //移动距离

var objX = 0; //目标对象位置

window.addEventListener('touchstart', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

initX = event.targetTouches[0].pageX;

objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;

}

if (objX == 0) {

window.addEventListener('touchmove', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

moveX = event.targetTouches[0].pageX;

X = moveX - initX;

if (X >= 0) {

obj.style.WebkitTransform = "translateX(" + 0 + "px)";

} else if (X < 0) {

var l = Math.abs(X);

obj.style.WebkitTransform = "translateX(" + -l + "px)";

if (l > 80) {

l = 80;

obj.style.WebkitTransform = "translateX(" + -l + "px)";

}

}

}

});

} else if (objX < 0) {

window.addEventListener('touchmove', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

moveX = event.targetTouches[0].pageX;

X = moveX - initX;

if (X >= 0) {

var r = -80 + Math.abs(X);

obj.style.WebkitTransform = "translateX(" + r + "px)";

if (r > 0) {

r = 0;

obj.style.WebkitTransform = "translateX(" + r + "px)";

}

} else { //向左滑动

obj.style.WebkitTransform = "translateX(" + -80 + "px)";

}

}

});

}

})

window.addEventListener('touchend', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;

if (objX > -40) {

obj.style.WebkitTransform = "translateX(" + 0 + "px)";

objX = 0;

} else {

obj.style.WebkitTransform = "translateX(" + -80 + "px)";

objX = -80;

}

}

})

})

消息列表

  • 你的快递到了,请到楼下签收

    删除
  • 哇,你在干嘛,快点来啊就等你了

    删除

写一个js向左滑动删除 交互特效的插件——Html5 touchmove

需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...

android QQ消息左滑动删除实例(优化版SwipeListViewEX)

仿 QQ消息左滑动删除item消息实例 源代码参考:http://blog.csdn.net/gaolei1201/article/details/42677951 自己作了一些调整,全部代码下载地址 ...

iOS边练边学--简单的数据操作&lpar;增、删、改&rpar;,左滑动删除和弹窗

一.数据刷新的原则: 通过修改模型数据,来修改tableView的展示 先修改数据模型 在调用数据刷新方法 不要直接修改cell上面子控件的属性 二.增删改用到的方法: <1>重新绑定屏幕 ...

Taro框架---左滑动删除

index.js import Taro, { Component } from '@tarojs/taro' import { View,ScrollView } from '@tarojs/com ...

IOS uitableviewcell 向左滑动删除编辑等

主要实现这个方法就好了 -(NSArray *)tableView:(UITableView *)tableView editActions ...

IOS UITableViewUITableView小技巧--实现cell向左滑动删除&comma;编辑等功能

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath { return Y ...

微信小程序左滑删除功能

效果图如下: wxml代码: /** * zepto插件:向左滑动删除动效 * 使用方法:$('.itemWipe').touchWi ...

js 类似于移动端购物车删除,左移动删除

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/541654.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java Double类hashCode()方法及示例

双类hashCode()方法 (Double class hashCode() method) hashCode() method is available in java.lang package. hashCode()方法在java.lang包中可用。 hashCode() method is used to return hashcode of the Double-object. hashCode()方法用于返回Double对象的哈希码。 hashC…

Java DataOutputStream size()方法及示例

DataOutputStream类的size()方法 (DataOutputStream Class size() method) size() method is available in java.io package. size()方法在java.io包中可用。 size() method is used to return the size of this stream or in other words, we can say it returns the value of…

html怎样让列表向下移动,Html无序列表ul控件实现行上下移动.

new document // 创建一个ulvar ul document.createElement("ul");ul.id "oList";// 创建divvar div document.getElementById(mergeCase);// 把ul放置到div中div.appendChild(ul);// 遍历所有的li条目function trace(){var strTest "";for …

创建laravel项目

下载项目到本地 git clone https://github.com/251068550/LaraBlog.gitcompoer安装 cd LaraBlog composer install如果composer install安装很慢&#xff0c;推荐安装国内镜像 执行 composer config -g repo.packagist composer https://packagist.phpcomposer.com 配置.env文件…

Java ArrayList removeRange()方法与示例

ArrayList类removeRange()方法 (ArrayList Class removeRange() method) removeRange() method is available in java.util package. removeRange()方法在java.util包中可用。 removeRange() method is used to remove the elements whose range is between st_in(start index)…

Spring注释事务失效及解决办法

如果带上事务&#xff0c;那么用annotation方式的事务注解和bean配置&#xff0c;事务会失效&#xff0c;要将service bean配置到xml文件中才行 在主容器中&#xff08;applicationContext.xml&#xff09;&#xff0c;将Controller的注解排除掉 <context:component-scan …

html5画分形图形,2.5 绘制透明图形 - HTML5 Canvas 实战

对于需要图形分层的应用&#xff0c;经常需要处理透明度。本节&#xff0c;我们将学习如何使用全局透明度设置图形的透明度。图2-5 绘制透明图形绘制步骤按照以下步骤&#xff0c;在一个不透明的矩形之上&#xff0c;绘制一个透明的圆&#xff1a;1. 定义2D画布上下文&#xff…

计算机网络子网划分_子网划分和超网| 计算机网络

计算机网络子网划分1)子网划分 (1) Subnetting) Subnetting is a concept of diving a block of addresses into sub-blocks of addresses. During the era of classful addressing (as it’s obscured now), subnetting was introduced. Say, an organization is granted a la…

html5录音功能代码,recorder.js 基于 HTML5 实现录音功能

recorder.js 基于 HTML5 实现录音功能2020-06-23 01:49:56recorder.jsmicrophone基于HTML5的录音功能&#xff0c;输出格式为mp3文件。前言完全依赖H5原生API所涉及的API&#xff1a;WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL兼容性Chrome、FF、Edge、QQ、360…

data.frame类型数据如何将第一列值替换为行号

data.frame类型数据如何将第一列值替换为行号 row.names(data) <- data[, 1]data <- data[, -1]

html5页面引入jquery,如何在javascript中引入jQuery?

jquery是一个用来代替JavaScript来快捷书写前端脚本语言的库&#xff0c;jquery可以大大的简化复杂的js代码&#xff0c;使开发人员专注于实现页面的效果。jquery的导入方式有两种&#xff0c;一种是本地导入&#xff0c;一种是从超链接导入。方式一&#xff1a;本地导入我们可…

Python字符串| isdecimal()方法与示例

isdecimal() is an in-built method in Python, which is used to check whether a string contains only decimal characters or not. isdecimal()是Python中的内置方法&#xff0c;用于检查字符串是否仅包含十进制字符。 Note: 注意&#xff1a; Decimal characters contai…

zt:缓存一致性(Cache Coherency)入门 cach coherency

http://www.infoq.com/cn/articles/cache-coherency-primer http://www.cnblogs.com/xybaby/p/6641928.html english: http://www.tuicool.com/articles/BVRNZbV yxr注&#xff1a; 1) 由于曾研究IBM的CPU加速(CAPI)&#xff0c;其提到内存一致性&#xff0c;为了弄清楚其和通…

湖南省普通招生2021高考成绩查询,湖南省2021八省联考成绩可查,附查询入口及往年分数线...

原标题&#xff1a;湖南省2021八省联考成绩可查&#xff0c;附查询入口及往年分数线湖南省2021年八省联考新高考适应性考试成绩公布&#xff0c;这次大家考的如何呢&#xff1f;此次成绩排名对于考生择校及志愿填报有一定的参考意义&#xff0c;小盒一时间收集整理相关消息&…

duration java_Java Duration类| plusDays()方法与示例

duration java持续时间类plusDays()方法 (Duration Class plusDays() method) plusDays() method is available in java.time package. plusDays()方法在java.time包中可用。 plusDays() method is used to add the given duration in days to this Duration and return the Du…

Ubuntu抛弃了Untiy转向Gnome,美化之路怎么办?不用怕咱一步一步大变身!

跨平台系列汇总&#xff1a;http://www.cnblogs.com/dunitian/p/4822808.html#linux 常用软件安装系统软件卸载&#xff1a;http://www.cnblogs.com/dunitian/p/6670560.html 1.下载UnityGnome版本 https://wiki.ubuntu.com/UbuntuGNOME/GetUbuntuGNOME 2.打开终端 or CtrlAltT…

html木桶布局,CSS3如何实现图片木桶布局?(附代码)

本篇文章给大家通过代码示例介绍一下使用CSS3实现图片木桶布局的方法。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。高度相同&#xff0c;而宽度不一样的布局&#xff0c;称之为木桶布局。它有几个鲜明的特点&#xff1a; 每行的图片…

万用表怎么测量电池容量_万用表检测光电耦合器的常用技巧

光电耦合器又称光耦合器或光耦&#xff0c;它属于较新型的电子产品&#xff0c;已经广泛应用在彩色电视机、彩色显示器、计算机、音视频等各种控制电路中。光电耦合器的构成和原理常见的光电耦合器有 4 脚直插和 6 脚两种&#xff0c;它们的典型实物外形和电路符号如图 3-4所示…

c语言if else语句_查找C程序的输出(如果为else语句)| 设置1

c语言if else语句Find the output of the following programs, 查找以下程序的输出&#xff0c; Program 1) 程序1) #include <stdio.h>int main(){int x 400, y, z;if (x > 500)y 400;z 300;printf("%d %d\n", y, z);return 0;}Output 输出量 32766 …

Javascript模块化编程(二):AMD规范

这个系列的第一部分介绍了Javascript模块的基本写法&#xff0c;今天介绍如何规范地使用模块。 七、模块的规范 先想一想&#xff0c;为什么模块很重要&#xff1f; 因为有了模块&#xff0c;我们就可以更方便地使用别人的代码&#xff0c;想要什么功能&#xff0c;就加载什么模…