类似于QQ的右滑删除效果的实现方法

原理：删除的div在窗口的外面，用户看不到，用户右滑，显示次div

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
	<title>小纸条</title>

	<script src="assets/wap/kuaiqin/js/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="assets/wap/kuaiqin/js/jl.js" type="text/javascript"></script>

	<style>
		*{
			margin:0px;
			padding: 0px;
			font-size: 14px;
			box-sizing: border-box;
		}body{overflow: hidden;width:100%;height:100%;}
		#list{
			border-top:1px solid #e6e6e6;
		}
		ul li{
			list-style-type: none;
			width: 100%;
			height:60px;
			position: relative;
			border-bottom:1px solid #e6e6e6;
		}
		div#header{
			width: 100%;
			height:45px;
			text-align: center;
			line-height: 45px;
			border-bottom:1px solid #e6e6e6;
			margin-bottom: 10px;
		}
		li p{
			height:30px;
			margin-left: 75px;
		}
		.right{float: right;}
		.time{margin-right: 24px;display:none;border-radius:50%;width:15px;height:15px;background-color:red;margin-top:20px;font-size:13px;text-align:center;line-height:15px;color:white;}

		.img-box{
			width:40px;height:40px;margin:10px 0px 10px 24px;position:absolute;
		}
		.blank{width:100%;height:15px;}
		.delfriend{height:60px;width:70px;background-color:red;display:block;position:absolute;top:0px;right:-70px;line-height:60px;color:#ffffff;text-align:center;z-index:13}
	</style>
</head>
<body>

<script>
	var w=$(window).width()+"px";
	var h=$(window).height()+"px";
	$("body").css({"width":w,"height":h});
</script>

	<div id="header">
		<img src="assets/wap/kuaiqin/img/return.png" style="position:absolute;top:5px;left:5px;z-index:100;width:10px;height:18px;margin-top:5px;" onclick="window.location.href= 'wap/kuaiqin/index';return false">
		小纸条
	</div>
	<div id="list">

		<div class="blank"></div>

		<ul id="myf">
			 <li class="myfriend" data-friendid="" id="del">
				<img src="" class="img-box">
				<p style="line-height: 40px;">
					<span class="right time" id=""></span>
				</p>
				<p style="line-height: 20px;" id="">uu</p>
				<span class="delfriend" >删除</span>
			</li>
		</ul>
	</div>

	<script>

		 $("#myf").unbind().on("touchstart",".myfriend",function (e) {
	      e.preventDefault();
	      var _a= e.originalEvent.targetTouches[0];
	      start=_a.pageX;
	      friendid=$(this).attr("data-friendid");
	   }).on("touchend",".myfriend", function (e) {
	      e.preventDefault();
	      var _a= e.originalEvent.changedTouches[0];
	      end=_a.pageX;
	      	if(start-end<0){
	      		$("#del_"+friendid).animate({"margin-left":"0px"},1000);
	      	}else if(start-end>0){//向右滑动,删除好友
	      		$(".myfriend").not("#del_"+friendid).animate({"margin-left":"0px"},1000);
	      		$("#del_"+friendid).animate({"margin-left":"-70px"},1000);
	      	}else{
	      		var cls=$(e.target).attr("data-cls");
		      	console.log(cls);
		      	var ff=$(e.target).attr("data-friendid");
		      	if(cls=="delfriend")delfriend(ff);
		      	else{
						window.location="wap/kuaiqin/sr_index?smallmy="+localStorage.tokenforkuaiqin+"&friendid="+friendid;
		      	}
	      	}
	   });

  </script>
</body>
</html>

以上就是小编为大家带来的类似于QQ的右滑删除效果的实现方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • Android仿腾讯QQ实现滑动删除 附源码下载

    Android仿腾讯QQ实现滑动删除 附源码下载

    看了很多大神们的文章,感觉受益良多,也非常欣赏大家的分享态度,所以决定开始写Blog,给大家分享自己的心得. 先看看效果图: 本来准备在ListView的每个Item的布局上设置一个隐藏的Button,当滑动的时候显示.但是因为每次只要存在一个Button,发现每个Item上的Button相互间不好控制.所以决定继承ListView然后结合PopupWindow. 首先是布局文件: delete_btn.xml:这里只需要一个Button <?xml version="1.0"

  • Android使用SwipeListView实现类似QQ的滑动删除效果

    Android使用SwipeListView实现类似QQ的滑动删除效果

    QQ的滑动删除效果很不错,要实现这种效果,可以使用SwipeListView. 1. 下载com.fortysevendeg.swipelistview这个项目(以前GitHub上有,现在GitHub上没有了,百度了很多次才下载到的),导入Eclipse,右键单击,选择Properties->Android,选中Library下面的IsLibrary. 2. 新建一个项目MySwipeListView,加入SwipeListView这个库. 3. 在主窗体里面放入一个SwipeListView控

  • Android App中ListView仿QQ实现滑动删除效果的要点解析

    Android App中ListView仿QQ实现滑动删除效果的要点解析

    本来准备在ListView的每个Item的布局上设置一个隐藏的Button,当滑动的时候显示.但是因为每次只要存在一个Button,发现每个Item上的Button相互间不好控制.所以决定继承ListView然后结合PopupWindow. 首先是布局文件: delete_btn.xml:这里只需要一个Button <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=

  • 类似于QQ的右滑删除效果的实现方法

    原理:删除的div在窗口的外面,用户看不到,用户右滑,显示次div <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@

  • 微信小程序实现列表项左滑删除效果

    微信小程序实现列表项左滑删除效果

    本文实例为大家分享了微信小程序实现列表项左滑删除效果的具体代码,供大家参考,具体内容如下 效果 图片 WXML <view class="container"> <!-- 收货地址 --> <view class="address"> <view class="left"> <view class="icon"> <image src="../../i

  • 微信小程序左滑删除效果的实现代码

    微信小程序左滑删除效果的实现代码

    今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果....... 先看效果 要实现的效果: 1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮. 思路: 1,首先页面每个

  • 使用Vue实现移动端左滑删除效果附源码

    左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 今天我给大家介绍的移动端左滑删除效果是基于Vue2实现的,结合以电商平台的删除购物车商品为例,来看实现步骤. 准备 安装vue项目过程已忽略,如果不懂vue的同学可以上官网看下:https://cn.vuejs.org/v2/guide/installation.html#NPM 我们使用安装一个

  • 小程序实现左滑删除效果

    小程序实现左滑删除效果

    本文实例为大家分享了小程序实现左滑删除效果的具体代码,供大家参考,具体内容如下 1.movable-area基本概念 实现思路: 大家仔细去看看官网的文档后再来看我写的这篇文章可能会更好理解. (1)movable-area这个就是定义了一个移动的区域,跟普通的<view></view>的含义是一样的,不同在于,接着往下看: 注意:movable-area 必须设置width和height属性,不设置默认为10px (2)movable-view这个就是一个可移动的视图容器,可以在

  • Vue 使用 Mint UI 实现左滑删除效果CellSwipe

    Mint UI 是饿了么开源的,基于 Vue.js 的移动端组件库. 关于Mint UI,有文档不够准确详尽,组件略显粗糙,功能不够完善等问题:也有高度组件化,体积小等优点. 安装Mint UI: # Vue 1.x npm install mint-ui@1 -S # Vue 2.0 npm install mint-ui -S 引入组件: // 引入全部组件 import Mint from 'mint-ui'; import 'mint-ui/lib/style.css' Vue.use(

  • 微信小程序实现左滑删除效果

    微信小程序实现左滑删除效果的具体代码,供大家参考,具体内容如下 .wxml <scroll-view scroll-y="{{isScroll}}" style='width:{{windowWidth}}px;height:{{windowHeight}}px'> <block wx:key="item" wx:for="{{data}}"> <view data-index='{{index}}' class=&

  • 微信小程序uniapp实现左滑删除效果(完整代码)

    微信小程序uniapp实现左滑删除效果(完整代码)

    微信小程序uniapp实现左滑删除效果 实现效果 1,列表中侧滑删除 2,删除不同时存在 3,上下滑动与侧滑删除不影响 在本页面引入组件并使用 (文件在文章的最下方附上) 在需要左滑删除的地方使用 <view v-for="(item, index) in csListArrl" :key="index" :data-index="index"> <delSlideLeft :item="item" :dat

  • iOS开发之导航栏各种右滑返回失效的解决方法汇总

    iOS开发之导航栏各种右滑返回失效的解决方法汇总

    前言 众所周知iOS 的几乎全部页面都是需要右滑返回的,否则用户体验会大打折扣,但是在开发过程中经常会碰到某些页面右滑返回失效的情况,下面记录一下各种情况下右滑返回失效的解决方法. 下面话不多说了,来随着小编一起学习学习吧 自定义返回按钮时失效 当你重写 self.navigationItem.leftBarButtonItem 之后,自带的返回按钮就会被覆盖,右滑返回就会失效,解决办法只要加入下面这句代码即可. - (void)viewDidLoad { [super viewDidLoad]

  • 记录一个Vue3简易微信右滑删除逻辑的思路实现

    记录一个Vue3简易微信右滑删除逻辑的思路实现

    目录 一.搭建简易的页面 二.前置条件 三.设计touchstart函数 四.设计touchend函数 五.加上过度动画 今天项目需求需要实现一个类似于微信右滑显示额外选项的功能,记录一下实现思路. 一.搭建简易的页面 对应的代码,界面使用了tailwindCSS,代码非常简单,就是普通的定位,关键的定位已经用黄色框框圈出.right的值为div删除的宽度,其它的样式这里不再过多赘述. 二.前置条件 这里先来梳理一下思路. 首先,我们需要给这删除按钮组件打上ref,因为之后我们需要用到这个div

随机推荐