JS 实现摇一摇兼容性

2024-09-08

用js实现摇一摇功能

function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemotion', deviceMotionHandler, false); } } var SHAKE_THRESHOLD = 3000; // 定义一个变量保存上次更新的时间 var last_update = 0; // 紧接着定义x.y.z记录三个轴的数据以及上一次出发的时间 var x; var

shake.js实现微信摇一摇功能

项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码: /* * Author: Alex Gibson * https://github.com/alexgibson/shake.js * License: MIT license */ (function(global, factory) { if (typeof define === 'func

使用shake.js让你博客支持摇一摇

大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake.js,shake.js github地址,我们只需要里面的shake.js,然后引入. 添加“摇一摇”事件监听 window.addEventListener('shake', shakeEventDidOccur, false); //function to call when shake oc

js微信摇一摇功能以及api

一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>inde.html访问成功</p> <div id="status" style="fo

js检测手机摇一摇

1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandler(event) { accGravity = event.acceleration; } if (window.DeviceMotionEvent) { window.addEventListener("devicemotion", motionHandler, false); } el

js html5 仿微信摇一摇

看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊先放代码 <body onload="init()"> <p>用力摇一摇你手机</p> <audio style="display:hiden;width:0px; height:0px;" id="musicBox" preload="metadata" controls src=&q

js实现手机摇一摇

//手机摇一摇 ---------------------------------------------------------- init();var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y = last_z = 0; function init() { if (window.DeviceMotionEvent) {

H5+JS实现手机摇一摇功能

在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientation事件提供了设备角度.朝向等信息). 而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果. 现在把完整代码记录下: //运动事件监听 if (wi

js摇一摇事件

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

H5实现摇一摇技术总结

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

C#开发微信门户及应用(38)--微信摇一摇红包功能

摇一摇周边红包接口是为线下商户提供的发红包功能.用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包.我曾经在<C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实现>介绍过微信摇一摇的相关管理,包括页面.设备之间的关系,以及使用等方面内容.本篇继续介绍摇一摇设备的另外一项功能,摇一摇红包功能,介绍如何利用微信摇摇周边的后台配置好页面及地址,然后通过微信JSSDK的方式,摇一摇获取红包的整个流程功能. 1.微信摇一摇红包功能介绍功能说明摇一摇周边红包接口是为线

H5摇一摇遇到的问题

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

html5摇一摇[转]

写在前面年底了,有些公司会出一个摇奖的活动,今天在家没事就搜了一下这方面的资料. 原文地址:http://www.cnblogs.com/waitingbar/p/4682215.html 测试效果还行. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>摇一摇</title> <style type="text/css&qu

通过手机Web实现手机摇一摇的功能

经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动

html5 DeviceOrientation来实现手机网站上的摇一摇功能

原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的幸福2胖纸的码农生活,直接转载了,不要介意!呵呵以下是转载内容. ——————————————————— 介绍之前做两个声明: 1.以下代码可以直接运行,当然你别忘了引用jQuery才行,我可提醒了,别到时候跑不起来骂我就成: 2.下面的实现思想参照了网上的一些文章,自己做了以下整理,对代码加入了一些注释说明,本人并非原创. <html lang="zh

利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

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

利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖

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

微信小程序实例-摇一摇抽奖

概述前面我们讲了如何开始微信小程序搭建和一些组件的介绍.微信小组件和微信小程序入门微信小程序目录为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json的文件,可以看到在"pages"的数组里,里面配置了每个界面,且包含了每个界面文件的目录我们接下来看一下page文件夹,可以看到每个页面需要包含两个文件,一个是js文件,是每个界面的入口,wxml的文件是每个界面的布局文件,wxss是样式文件. 接下来看一下logs文件夹,在logs文件

用vue 写h5页面-摇一摇

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

H5 DeviceMotionEvent 事件制作“摇一摇效果”

摇一摇”的效果制作主要依赖于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

JS 实现摇一摇 兼容性

热门专题

JS 实现摇一摇兼容性