js 在页面实现微信按住说话，移开取消录音效果

获取起点（touchstart）Y轴坐标与终点（touchend）Y轴坐标，如果起点大于终点那么就去执行取消操作
********：坐标起点是浏览器左上角，所以往上滑动的话，起点坐标大于终点坐标。

点击长按啊

JS：//
var btnElem=document.getElementById("loading");//获取ID
var posStart = 0;//初始化起点坐标
var posEnd = 0;初始化终点坐标
function initEvent() {
btnElem.addEventListener("touchstart", function(event) {
event.preventDefault();//阻止浏览器默认行为
posStart = 0;
posStart = event.touches[0].pageY;//获取起点坐标
});
btnElem.addEventListener("touchend", function(event) {
event.preventDefault();
posEnd = 0;
posEnd = event.changedTouches[0].pageY;//获取终点坐标
if(posStart - posEnd > 20 ){
alert("Cancel");
};
});
};
initEvent();

转载于:https://www.cnblogs.com/richardcastle/p/8297370.html

js 在页面实现微信按住说话，移开取消录音效果相关推荐

微信小程序 - 超详细 “长按说话“ 实时语音录制与播放功能，仿微信发语音 “按住说话，松开取消“ 录音功能效果（详细示例源码，一键复制开箱即用！）
效果图网上的教程代码都太乱了,各种乱七八糟的代码还没有注释,根本无法复制后进行改造. 在微信小程序项目开发中,详细的实现了长按录音.上滑手势取消等功能,丝滑流畅不卡顿你直接直接粘贴,稍微改改提示文 ...
[MAUI]模仿微信“按住-说话”的交互实现
文章目录创建页面布局创建手势控件创建TalkBox 创建动画拖拽物动画按钮激活动画 TalkBox动画 Layout动画项目地址 .NET MAUI 跨平台框架包含了识别平移手势的功能,在 ...
pc端和移动端鼠标事件,实现与微信按住说话差不多的按键
1.移动端: 事件类型: touchstart : 触摸开始(手指放在触摸屏上) touchmove : 拖动(手指在触摸屏上移动) touchend : 触摸结束(手指从触摸屏上移开) 直接上栗子, ...
微信按住说话HTML实现
直接看代码来得快: <meta name="viewport" content="width=device-width, initial-scale=1.0, ma ...
JS实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...
uniapp微信小程序实现按住说话功能
前端页面布局代码描述:@longpress是uniapp的事件,长按时触发的事件,@touchend事件可以监听松开按钮时触发的. <view class ...
JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果.document.onreadystatechange = function () {if (document.readyState ...
php按住说话然后播放,小程序仿微信聊天按住说话功能
小程序仿微信聊天按住说话功能实现:按住说话有录音动画,上滑可取消发送,松开发送录音录音授权判断 # .wxml bind:longpress="onLongpress" cat ...
html禁止手机文字放大,js实现移动端微信页面禁止字体放大
由于微信自带字体放大功能,因此基于微信的页面都可以通过微信进行字体放大,但是有些情况下这并不是我们想要的,因为很多移动端页面的开发都是使用rem作为单位的,当使用微信进行字体放大是,会导致页面的整体布 ...

js 在页面实现微信按住说话，移开取消录音效果

js 在页面实现微信按住说话，移开取消录音效果相关推荐

最新文章

热门文章