一微信摇一摇的css部分:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
二.微信摇一摇的Html部分：
<body>
</body>
三.微信摇一摇的js部分：
<script type="text/javascript">
//cover设置背景尺寸,将背景按body宽高缩放
document.body.style.backgroundSize = "cover";
//给body添加背景图
document.body.style.backgroundImage = "url(img/bg.jpg)";
//事件设备：触发该事件需要硬件支持
//摇一摇功能
var currentValue = {
x: 0,
y: 0,
z: 0
};
//获取手机晃动后加速器的值，创建一个对象获取
var lastValue = {
x: 0,
y: 0,
z: 0
};
//设置晃动的最小距离，只要达到该距离时，才执行摇一摇事件
var minValue = 20;
//第一种方式：
var p1 = document.createElement("p");
var img1 = document.createElement("img");
img1.style.width = "375px";
img1.style.height = "560px";
//手机晃动事件
window.ondevicemotion = function(e) {
var event1 = event || e;
//获取加速器对象，为的是获取陀螺仪上的坐标信息；
var acceleration = event1.accelerationIncludingGravity;
p1.style.fontSize = "18px";
p1.style.color = "white";
p1.style.marginTop = "200px";
p1.innerHTML = "x:" + acceleration.x + "<br>" + "Y:" + acceleration.y + "<br>" + "Z:" + acceleration.z;
//记录当前加速器的值
currentValue.x = acceleration.x;
currentValue.y = acceleration.y;
currentValue.z = acceleration.z;
//判断微信摇一摇事件（手机是否在晃动）
if (Math.abs(currentValue.x - lastValue.x) >= minValue || Math.abs(currentValue.y - lastValue.y) >= minValue || Math.abs(currentValue.z - lastValue.z) >= minValue) {
//构成手机晃动事件
//实现微信摇一摇
//第一种方式：可以将微信摇一摇中的图片作为body的背景图
//随机一张图片的名字
var ranN = Math.floor(Math.random() * (10 - 1 + 1) + 1);
var timer = setInterval(function() {
ranN++;
if (ranN == 10) {
ranN = 1;
}
//为当前的body设置背景图
// document.body.style.backgroundImage = "url(img/" + ranN + ".jpg)";
//第二种方式
img1.src = "img/" + ranN + ".jpg";
}, 400);
//设置一个延迟器，延迟一段时间之后，消除定时器
setTimeout(function() {
clearInterval(timer);
}, 1000);
}
//记录最后的值（保存上一次的晃动事件中的加速器的值）
lastValue.x = currentValue.x;
lastValue.y = currentValue.y;
lastValue.z = currentValue.z;
}
// document.body.appendChild(p1);
document.body.appendChild(img1);
</script>
</html>
扫一扫
649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
