移动端按住说话功能实现

2019独角兽企业重金招聘Python工程师标准>>>

(function(){var LSwiperMaker = function(o){ var that = this;this.config = o;this.control = false;this.sPos = {};this.mPos = {};this.dire;     this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);//this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);} LSwiperMaker.prototype.start = function(e){$(".sound_gif").show();e.preventDefault();   //！！！阻止微信默认长按弹出的菜单}/*LSwiperMaker.prototype.move = function(e){   var point = e.touches ? e.touches[0] : e;this.control = true;this.mPos.x = point.screenX;this.mPos.y = point.screenY;$("#play").css("left",this.mPos.x+"px");   } */LSwiperMaker.prototype.end = function(e){$(".sound_gif").hide();} window.LSwiperMaker = LSwiperMaker;document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
}())
//创建新的LSwiperMaker对象，并传入要拖动的图标
var a = new LSwiperMaker({bind:document.getElementById("sound_reserve")
})

只需要touchstart和touchend事件配合

需要注意的是，构造函数LSwiperMaker里的this，指的是新创建的对象实例，在例子中指的是new创建的a对象。

传{bind:document.getElementById("sound_reserve")}入构造函数的参数o，

this.config = o;

也就是把传参o赋值给新建对象（例子是a）的config属性

this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);

这里的bind是传参o的一个属性，这里的意思是为bind的属性值绑定事件，也就是ID为sound_reserve的元素。

转载于:https://my.oschina.net/daladida/blog/736609

移动端按住说话功能实现相关推荐

小程序仿微信聊天按住说话功能
小程序仿微信聊天按住说话功能实现:按住说话有录音动画,上滑可取消发送,松开发送录音录音授权判断 # .wxml <view class="btn {{touchBtn?'hover ...
android 实现按住说话功能
今天工作上需要做一个仿微信语音聊天中的按住说话的功能.其实很简单,主要就是利用MediaRecorder实现录音,用MediaPlayer实现播放功能.下面我就具体说一下是怎么实现的. 1,首先对按钮 ...
php按住说话然后播放,小程序仿微信聊天按住说话功能
小程序仿微信聊天按住说话功能实现:按住说话有录音动画,上滑可取消发送,松开发送录音录音授权判断 # .wxml bind:longpress="onLongpress" cat ...
android长按动画效果,android 实现按住说话功能
今天工作上需要做一个仿微信语音聊天中的按住说话的功能.其实很简单,主要就是利用MediaRecorder实现录音,用MediaPlayer实现播放功能.下面我就具体说一下是怎么实现的. 1,首先对按钮 ...
uniapp微信小程序实现按住说话功能
前端页面布局代码描述:@longpress是uniapp的事件,长按时触发的事件,@touchend事件可以监听松开按钮时触发的. <view class ...
pc端和移动端鼠标事件,实现与微信按住说话差不多的按键
1.移动端: 事件类型: touchstart : 触摸开始(手指放在触摸屏上) touchmove : 拖动(手指在触摸屏上移动) touchend : 触摸结束(手指从触摸屏上移开) 直接上栗子, ...
[MAUI]模仿微信“按住-说话”的交互实现
文章目录创建页面布局创建手势控件创建TalkBox 创建动画拖拽物动画按钮激活动画 TalkBox动画 Layout动画项目地址 .NET MAUI 跨平台框架包含了识别平移手势的功能,在 ...
如何快速实现移动端短视频功能？
在"互联网+"概念被炒的如火如荼的今天,短视频以视频短.传播快.生产流程简单.制作门槛低.参与性强等特点在互联网所有的热门的焦点中脱颖而出,出现在公众的视野里.那么如何快速实现移动 ...
vue怎么获取用户的位置经纬度_vue 实现Web端的定位功能获取经纬度
首先我这里的需求呢, 是获取当前用户的经纬度经过无数次的测试, 先后用了腾讯/百度地图的api,最后绝对还是高德的js APi 废话不多说, 直接上代码. 首先在 index.html 里面引入 ...

移动端按住说话功能实现

移动端按住说话功能实现相关推荐

最新文章

热门文章