期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

移动端的摇一摇实现效果

摇一摇的原理非常简单,检测到手机的重力加速忽然有比较大的变化幅度即可。摇一摇时,元素颜色发生变化

实例代码如下:

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  			#box{    width: 100px;    height: 100px;    background: pink;    margin: 30px auto 0;    text-align: center;    transition: 1s;  }    		</style>  	</head>  	<body>  		<div id="box">摇一摇变颜色</div>  	</body>  	<script type="text/javascript">  		let oBox = document.getElementById('box');  let colorArr = ['orange','lightblue','lightgreen','pink','lightyellow']  let lastX,lastY,lastZ  let index = 0  window.addEventListener('devicemotion',(e)=>{    requestAnimationFrame(()=>{      let {x,y,z} = e.accelerationIncludingGravity      let nowRange = Math.abs(lastX -x) + Math.abs(lastY - y) + Math.abs(lastZ - z)       if(nowRange > 80){        index = (index+1)%colorArr.length        oBox.style.background = colorArr[index]      }      lastX = x       lastY = y      lastZ = z     })  })  	</script>  </html>

效果图片:

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册