为啥写这篇文章 最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮.这个需求其实在app上很常见,但是在移动端h5中,我们没有长按的事件,所以就需要自己模拟这个事件了. 大概效果如下: ps: 为了做个gif还下了app,还得通过邮件发到电脑上,脑瓜疼.. 思路 放弃click事件,通过判断按的时长来决定是单击还是长按 使用touchstart和touchend事件 在touchstart中开启一个定时器,比如在700ms后显示一个长按菜单 在touchend中清除这个定时器,这样如果按…

摇一摇”的效果制作主要依赖于H5的deviceMotionEvent事件 先讲怎么使用,具体的原理在后边补充 第一步:捕捉重力加速度 var acceleration = eventData.accelerationIncludingGravity; 第二步:监听函数并执行. var SHAKE_THRESHOLD = 800; var last_update = 0; var x, y, z, last_x, last_y, last_z; if ((window.DeviceMotionEv…

DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信息,表示为一系列本地坐标系的旋角.devicemotion:提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标.其还提供了设备在坐标系中的自转速率.若可行的话,事件应该提供设备重心处的加速信息.compassneedscalibration:用于通知Web站点使用罗盘信息校准上述事件. 5…

我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一段事件的思考,绝对采用html5+socket.io来实现这个功能.首先我把该功能的实现拆分为以下几个步骤: 移动端前端页面+脚本逻辑实现 PC端前端页面+脚本逻辑实现 后台逻辑实现 加入socket.io实现长连接 实现移动端控制PC端逻辑 下文中的代码有不全的地方,大家可以查看我的Github项…

摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', handler, !1); lastTime = new Date(); } else { alert('你的浏览器不支持摇一摇功能.'); } devicemotion…

今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少.  发现很有意思.  一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我. //运动事件监听if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler,false);} //获取加速度信息//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行…

摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像微信的摇一摇一样,摇晃过程中,会有上下移动的动画,这里加入了周围金币做跳跃运动的动画. 二.摇晃不灵敏,需要用力摇晃手机才行 摇晃灵敏度是个不太好控制的量,即要求不是很灵敏,比如,不能稍微碰一下就摇晃了,也不能使劲摇才能摇中,这就需要对X.Y.Z轴上的加速度进行合理利用,这里是几种…

一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像微信的摇一摇一样,摇晃过程中,会有上下移动的动画,这里加入了周围金币做跳跃运动的动画. 二.摇晃不灵敏,需要用力摇晃手机才行 摇晃灵敏度是个不太好控制的量,即要求不是很灵敏,比如,不能稍微碰一下就摇晃了,也不能使劲摇才能摇中,这就需要对X.Y.Z轴上的加速度进行合理利用,这里是几种网上常见的处理方式…

vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的第三方的插件(后续会完成如何写vue插件的方法)shake.js ,github地址: https://github.com/alexgibson/shake.js  我使用的github 项目要点赞(现在要养成习惯) 使用:在vue的一个组件里使用这个 插件. 接下来我们看这个插件提供的api,灵…

geolocation window.navigator.geolocation 1.getCurrentPosition() // 获取当前的位置信息 2.watchPosition() // 监视位置变化,和1参数一样 3.clearWatch() // 清除位置监视 1.getCurrentPosition(s, e, p) success回调 (必须) error回调 options参数 需要FQ // 特别注意,chrome需要在连上vpn的时候才能获取到 var success =…