Home > php教程 > php手册 > ThinkPHP3.2.3实现手机摇一摇随机推荐文章效果

ThinkPHP3.2.3实现手机摇一摇随机推荐文章效果

WBOY
Release: 2016-06-07 11:36:55
Original
1039 people have browsed it

手机摇一摇效果基于html5方向感应DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,轻松的实现重力感应、指南针等有趣的功能。今天我们以实例展示THINKPHP3.2.3实现手机摇一摇随机推荐文章效果。
可手机或微信访问www.gouugoyin.cn首页,用手机摇一摇,即可在右侧看到摇一摇随机推荐效果。
ThinkPHP3.2.3实现手机摇一摇随机推荐文章效果
首先在需要摇一摇的模板页引入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(&#039;shake&#039;, shakeEventDidOccur, false); <br /> <br /> function shakeEventDidOccur () { <br /> var url = "{:U(&#039;home/article/get_rand_list&#039;)}";<br /> $.post(url , { num:10,order:&#039;rand()&#039; }, function(data){<br /> if(data.status == &#039;ok&#039;){<br /> $(".js_shadeBox ul").append(data.html);<br /> }else{<br /> alert(data.msg);<br /> }<br /> }, &#039;json&#039;).error(function(){<br /> alert(&#039;网络错误,请稍后再试&#039;);<br /> });<br /> } <br /> });<br /> </script>服务器根据提交的请求参数生成随机文章列表数组并循环拼接好的html代码片段,我们将返回html片段追加到ul里,实现了摇一摇随机推荐的效果。
PS:为方便大家使用,特将所有涉及的代码和数据库打包上传,下载地址:http://www.gouguoyin.cn/php/62.html

AD:真正免费,域名+虚机+企业邮箱=0元

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template