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

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

WBOY
WBOY原創
2016-06-07 11:36:551026瀏覽

手机摇一摇效果基于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元

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn