这次给大家带来怎样使用JS+H5实现微信摇一摇，使用JS+H5实现微信摇一摇的注意事项有哪些，下面就是实战案例，一起来看一下。
项目终于如约上线，但是在春节前又有一个新的活动要做，类似微信的摇一摇活动。也一直在做微信公众号的东西，但是要调用微信摇一摇的接口还是有些困难，因为只提供了摇一摇周边，附近的人以及一系列的红包页面，相对于我们的需求只需要摇一摇这个动作却是大相径庭。
其实H5+JavaScript写出来的页面，通过获取手机的屏幕长和宽，以及添加声音等就可以实现摇一摇的效果。
第一步，实现手机摇动改变颜色
HTML5 手机摇一摇 var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff'); if(window.DeviceMotionEvent) { var speed = 25; var x = y = z = lastX = lastY = lastZ = 0; window.addEventListener('devicemotion', function(){ var acceleration =event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) { document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6]; } lastX = x; lastY = y; }, false); } 手机摇一摇，改变屏幕颜色。
登录后复制
主要是手机的DeviceMotionEvent事件
第二步，微信摇一摇手势
相对于第一步就是增加了摇一摇手势，改变了摇动事件。在摇一摇动作之后再添加自己想要的方法即可，无论是想要进入下一个自己做的页面还是触发一个Controller事件都可以。
摇一摇 var SHAKE_THRESHOLD = 1000; var last_update = 0; var last_time = 0; var x; var y; var z; var last_x; var last_y; var last_z; var sound = new Howl({ urls: ['/shake/sound/shake_sound.mp3'] }).load(); var findsound = new Howl({ urls: ['/shake/sound/shake_match.mp3'] }).load(); var curTime; var isShakeble = true; function init() { if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); } else { $("#cantshake").show(); } } function deviceMotionHandler(eventData) { curTime = new Date().getTime(); var diffTime = curTime - last_update; if (diffTime > 100) { var acceleration = eventData.accelerationIncludingGravity; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD && curTime - last_time > 1100 && $("#loading").attr('class') == "loading" && isShakeble) { shake(); } last_x = x; last_y = y; last_z = z; } } function shake() { last_time = curTime; $("#loading").attr('class','loading loading-show'); $("#shakeup").animate({ top: "10%" }, 700, function () { $("#shakeup").animate({ top: "25%" }, 700, function () { $("#loading").attr('class','loading'); findsound.play(); //在此为摇动之后的事件，这里为调用ControllergoShakeResult方法 window.location.href = "shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}"; }); }); $("#shakedown").animate({ top: "40%" }, 700, function () { $("#shakedown").animate({ top: "25%" }, 700, function () { }); }); sound.play(); } //各种初始化 $(document).ready(function () { Howler.iOSAutoEnable = false; FastClick.attach(document.body); init(); });
| | |
| 您今天还可以摇次 | |
| 正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了。 | |
登录后复制
有时候真的可以换一种方法去实现自己想要的功能。附图：demo本来实现的效果是:
改版之后
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Vue按键修饰符处理事件步骤详解
JS+CSS3做出图片绑定鼠标移动事件放大
以上就是怎样使用JS+H5实现微信摇一摇的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2758467.html
