當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js仿QQ中对联系人向左滑动、滑出删除按钮的操作

發(fā)布時間：2025/6/15 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 js仿QQ中对联系人向左滑动、滑出删除按钮的操作小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

2019獨角獸企業(yè)重金招聘Python工程師標準>>>

101

102

純js：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"><title>html5向左滑動刪除特效</title><style>* {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}</style><script>/** 描述：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;}}})})</script></head><body><header><h2>消息列表</h2></header><section class="list"><ul class="list-ul"><li id="li" class="list-li"><div class="con">你的快遞到了，請到樓下簽收</div><div class="btn">刪除</div></li><li class="list-li"><div class="con">哇，你在干嘛，快點來啊就等你了</div><div class="btn">刪除</div></li></ul></section></body></html>

做成zepto插件
實際項目中，我們可能有很多個地方會用到這個功能。現(xiàn)在我們將這個功能做成zepto插件，方便后面使用。

這個插件，我們僅實現(xiàn)這個功能，然后傳入?yún)?shù)（刪除按鈕的樣式名），讓程序在js中計算所需要滑動的距離，方便復用。

/*** zepto插件：向左滑動刪除動效* 使用方法：$('.itemWipe').touchWipe({itemDelete: '.item-delete'});* 參數(shù)：itemDelete 刪除按鈕的樣式名*/;(function($) {$.fn.touchWipe = function(option) {var defaults = {itemDelete: '.item-delete', //刪除元素};var opts = $.extend({}, defaults, option); //配置選項var delWidth = $(opts.itemDelete).width();var initX; //觸摸位置var moveX; //滑動時的位置var X = 0; //移動距離var objX = 0; //目標對象位置$(this).on('touchstart', function(event) {event.preventDefault();var obj = this;initX = event.targetTouches[0].pageX;objX = (obj.style.WebkitTransform.replace(/translateX$/g, "").replace(/px$/g, "")) * 1;if (objX == 0) {$(this).on('touchmove', function(event) {event.preventDefault();var obj = this;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 > delWidth) {l = delWidth;obj.style.WebkitTransform = "translateX(" + -l + "px)";}}});} else if (objX < 0) {$(this).on('touchmove', function(event) {event.preventDefault();var obj = this;moveX = event.targetTouches[0].pageX;X = moveX - initX;if (X >= 0) {var r = -delWidth + 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(" + -delWidth + "px)";}});}})$(this).on('touchend', function(event) {event.preventDefault();var obj = this;objX = (obj.style.WebkitTransform.replace(/translateX$/g, "").replace(/px$/g, "")) * 1;if (objX > -delWidth / 2) {obj.style.transition = "all 0.2s";obj.style.WebkitTransform = "translateX(" + 0 + "px)";obj.style.transition = "all 0";objX = 0;} else {obj.style.transition = "all 0.2s";obj.style.WebkitTransform = "translateX(" + -delWidth + "px)";obj.style.transition = "all 0";objX = -delWidth;}})//鏈式返回return this;};})(Zepto);

touchWipe.html

轉(zhuǎn)載于:https://my.oschina.net/yanyaya/blog/713723

總結(jié)

以上是生活随笔為你收集整理的js仿QQ中对联系人向左滑动、滑出删除按钮的操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： C++对象模型学习——站在对象模型的尖端
下一篇： MySQL索引原理及慢查询优化美团