设为首页收藏本站

站长之家.源码之家.wap站长之家.wap源码之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 域名 空间 程序
查看: 2463|回复: 0

HTML5摇一摇换网页背景色/图片代码

[复制链接]
发表于 2015-2-2 17:56:06 | 显示全部楼层 |阅读模式
摇一摇功能在安卓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>

代码中已给出修改说明,把自己需要的背景色代码替换进去或增删即可。控制背景色变换的位置在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>
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

友情提示: 没有图片帖子!

申请友链 |Archiver | 站长之家讨论论坛

© 2012-2015 站长之家( 浙ICP备14006854号 ) GMT+8, 2019-7-22 13:41 , Processed in 0.341477 second(s), 38 queries . Powered by kuhack.net X3.2    

禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.如遇版权问题,请及时联系点击这里给我发消息

今天是: | 本站已经安全运行: //这个地方可以改颜色

低部图片

返回顶部