摇一摇功能在安卓IOS客户端上较为常见,其实我们也可以在手机网页上实现这类功能,通过摇一摇自己的移动设备进行网页换肤,刷新等。这里主要利用到HTML5的一个重要特性——DeviceOrientation。

何为DeviceOrientation,可以看看网上的一些介绍:

在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态、加速度等数据(另还有deviceOrientation事件提供了设备角度、朝向等信息)。

而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果。

请用安卓IOS的自带或UC等浏览器测试,以下代码来自网络,附上一点注释,仅供参考:

<script type="text/JavaScript">
var color = new Array('#f5f5f5', '#9D9D9D', 'black', '#FFA042', '#B766AD', '#00A600');
//随机变化的颜色代码
if(window.DeviceMotionEvent) {
var speed = 18;
//触动颜色改变的摇晃程度(阀值),越小越易触动
var x = y = z = lastX = lastY = lastZ = 0;
//重置所有数值
window.addEventListener('devicemotion',function(){
//运动传感事件,需设备浏览器支持
var acceleration = event.accelerationIncludingGravity;
//将传感值赋给acceleration
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
//当x或y方向的变化超过上面的阀值,将触动变色
document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
//指定需要变化背景色的位置,其中"6"为随机背景色的数量
}
lastX = x;
lastY = y;
}, false);
}
</script>
<span style="color:green;border-bottom:1px dashed grey;">摇一摇手机,换个背景色</span>

演示效果请看http://xiaows.com/demo/yaoyiyaobackgroundcolor.html

代码中已给出修改说明,把自己需要的背景色代码替换进去或增删即可。控制背景色变换的位置在document.body.style.backgroundColor这行,将body替换成指定位置的ID或class,如控制<div id="content">需要变色的位置</div>可以用getElementById('content')

之前有友友要摇一摇换背景图片的,下面博主笑忘书修改并附上一个简单摇一摇换背景图片版,替换里面的图片链接即可。如需更好效果,请自行用CSS控制背景图片。

<script type="text/JavaScript">
var image = new Array('http://xiaows.com/demo/img/dahuaxiyou.jpg', 'http://xiaows.com/demo/img/kungfu.jpg', 'http://xiaows.com/demo/img/huihunye.jpg');
//随机变化的图片地址
if(window.DeviceMotionEvent) {
var speed = 18;
//触动图片改变的摇晃程度(阀值),越小越易触动
var x = y = z = lastX = lastY = lastZ = 0;
//重置所有数值
window.addEventListener('devicemotion',function(){
//运动传感事件,需设备浏览器支持
var acceleration = event.accelerationIncludingGravity;
//将传感值赋给acceleration
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
//当x或y方向的变化超过上面的阀值,将触动变图
document.body.style.backgroundImage = "url("+image*[Math.round(Math.random()*10)%3]+")";
//指定需要变化背景图的位置,其中"3"为随机图片的数量
}
lastX = x;
lastY = y;
}, false);
}
</script>
<span style="color:green;border-bottom:1px dashed grey;">摇一摇手机,换背景图片</span>

演示效果请看http://xiaows.com/demo/yaoyiyaobackgroundimage.html

全文完