利用重力传感器制作红包

最新推荐文章于 2022-10-20 16:45:22 发布

zyz0728

最新推荐文章于 2022-10-20 16:45:22 发布

阅读量428

点赞数

分类专栏： JavaScript css3 html5

本文链接：https://blog.csdn.net/zyz0728/article/details/50408868

版权

JavaScript 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

html5

7 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

我们都知道现在微信摇一摇功能，今天我就想写一个红包程序。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>

<body>
<script>
if(window.DeviceMotionEvent) { 
var speed = 25;//定义一个数值 
var x = y = z = lastX = lastY = lastZ = 0;//重置所有数值 
window.addEventListener('devicemotion', function(){ 
var acceleration =event.accelerationIncludingGravity;//将传感值赋给acceleration 
x = acceleration.x; 
y = acceleration.y; 
z = acceleration.z; 
if(Math.abs(x-lastX) > speed ) { 
//取绝对值；
// TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作 
//document.write(y);
donghua(); 
} 
lastX = x; 
lastY = y; 
lastZ = z; 
}, false); 
} 
var f=1; 
function donghua(){ 
//动画事件 
var a=document.getElementById("img2");
a.style.animationName="first";
a.style.animationDelay="0.5s";
a.style.animationDuration="1s";
}
</script>
<style>
.image{
	width:500px;
	height:800px;
	margin:0 auto;
	}
#img2{
	width:500px;
	height:800px;
	}
@keyframes first{
	0%{transform:rotate(0deg);}
	10%{transform:rotate(15deg);}
	20%{transform:rotate(30deg);}
	30%{transform:rotate(0deg);}
	40%{transform:rotate(-15deg);}
	50%{transform:rotate(-30deg);}
	70%{transform:rotate(0deg);}
	80%{transform:rotate(15deg);}
	90%{transform:rotate(30deg);}
	100%{transform:rotate(0deg);}
	}
</style>
<div class="image">
<img src="12-13.jpg" id="img2"  width="500" height="800">
</div>
</body>
</html>

这些上面的就是我的代码，主要初步的实现了我们摇晃我们的设备产生效果，相当于利用一个监听器来实现功能。

zyz0728

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用重力传感器制作红包

我们都知道现在微信摇一摇功能，今天我就想写一个红包程序。demoif(window.DeviceMotionEvent) { var speed = 25;//定义一个数值 var x = y = z = lastX = lastY = lastZ = 0;//重置所有数值 window.addEventListener('devicemotion', func
复制链接

扫一扫

专栏目录