实例介绍
【实例简介】
【实例截图】
【核心代码】
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>简易模拟微信摇一摇</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
* { margin: 0; padding: 0; }
body { background: #292D2E; }
.hand { width: 190px; height: 300px; background: url(hand.png) no-repeat; position: absolute; top: 50px; left: 50%; margin-left: -95px; }
.hand-animate {
-webkit-animation: hand_move infinite 2s;
-moz-animation: hand_move infinite 2s;
-ms-animation: hand_move infinite 2s;
-o-animation: hand_move infinite 2s;
}
.result { background: #393B3C; border: #2C2C2C 1px solid; box-shadow: inset #4D4F50 0 0 0 1px; border-radius: 10px; color: #fff; padding: 10px; width: 300px; position: absolute; top: 300px; left: 50%; margin-left: -161px; opacity: 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s; }
.result .pic { width: 50px; height: 50px; float: left; background: #fff; }
.result .con { overflow: hidden; zoom: 1; padding-left: 10px; line-height: 24px; }
.result-show { opacity: 1; margin-top: 50px; }
.loading { position: absolute; top: 240px; left: 50%; margin-left: -50px; width: 100px; height: 100px; background: url(spinner.png) no-repeat; background-size: 100px 100px; opacity: 0;
-webkit-animation: loading infinite linear .5s;
-moz-animation: loading infinite linear .5s;
-ms-animation: loading infinite linear .5s;
-o-animation: loading infinite linear .5s;
animation: loading infinite linear .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s; }
.loading-show { opacity: 1; }
@-webkit-keyframes hand_move {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0); }
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg); }
100% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0); }
}
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0); }
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="hand" class="hand hand-animate"></div>
<div id="loading" class="loading"></div>
<div id="result" class="result">
<div class="pic"></div>
<div class="con">摇晃结果<br>摇晃结果的其他信息哈哈哈</div>
</div>
<div class="link" style="position:fixed;bottom:20px">
<a href="yao1yao1.html">1、 获取设备信息</a><br>
<a href="yao1yao2.html">2、 摇晃判断</a><br>
<a href="yao1yao3.html">3、 简易模拟微信摇一摇</a><br>
<a href="yao1yao4.html">4、 简易模拟微信摇一摇2</a>
</div>
<script>
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('本设备不支持devicemotion事件');
}
var speed = 23;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(event) {
var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed || Math.abs(z - lastZ) > speed) {
doResult();
}
lastX = x;
lastY = y;
lastZ = z;
}
function doResult() {
document.getElementById("result").className = "result";
document.getElementById("loading").className = "loading loading-show";
setTimeout(function(){
//document.getElementById("hand").className = "hand";
document.getElementById("result").className = "result result-show";
document.getElementById("loading").className = "loading";
}, 1000);
}
</script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论