手机摇一摇效果基于html5方向感应DeviceOrientation，它将底层的方向和运动传感器进行了高级封装，轻松的实现重力感应、指南针等有趣的功能。今天我们以实例展示THINKPHP3.2.3实现手机摇一摇随机推荐文章效果。
可手机或微信访问www.gouugoyin.cn首页，用手机摇一摇，即可在右侧看到摇一摇随机推荐效果。
首先在需要摇一摇的模板页引入jquery.js和检测手机摇晃的shade.js，HTML结构如下：<script></script><br><script></script><br><div>
<br>
<h4>
<br>
摇一摇随机推荐<br>
</h4>
<br>
<ul>
<br>
<br>
</ul>
<br>
</div>然后使用shake.js检测到用户手机摇晃，当摇晃发生时调用函数shakeEventDidOccur()，向服务器发送Ajax请求，JS代码如下：<script><br />
$(function(){<br />
var myShakeEvent = new Shake({ <br />
threshold: 15 <br />
}); <br />
<br />
myShakeEvent.start(); <br />
<br />
window.addEventListener('shake', shakeEventDidOccur, false); <br />
<br />
function shakeEventDidOccur () { <br />
var url = "{:U('home/article/get_rand_list')}";<br />
$.post(url , { num:10,order:'rand()' }, function(data){<br />
if(data.status == 'ok'){<br />
$(".js_shadeBox ul").append(data.html);<br />
}else{<br />
alert(data.msg);<br />
}<br />
}, 'json').error(function(){<br />
alert('网络错误，请稍后再试');<br />
});<br />
} <br />
});<br />
</script>服务器根据提交的请求参数生成随机文章列表数组并循环拼接好的html代码片段，我们将返回html片段追加到ul里，实现了摇一摇随机推荐的效果。
PS：为方便大家使用，特将所有涉及的代码和数据库打包上传，下载地址：http://www.gouguoyin.cn/php/62.html
AD：真正免费，域名+虚机+企业邮箱=0元
PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
C++高性能并发应用_C++如何开发性能关键应用
Java AI集成Deep Java Library_Java怎么集成AI模型部署
Golang后端API开发_Golang如何高效开发后端和API
Python异步并发改进_Python异步编程有哪些新改进
C++系统编程内存管理_C++系统编程怎么与Rust竞争内存安全
Java GraalVM原生镜像构建_Java怎么用GraalVM构建高效原生镜像
Python FastAPI异步API开发_Python怎么用FastAPI构建异步API
C++现代C++20/23/26特性_现代C++有哪些新标准特性如modules和coroutines
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
11059
收藏
