手机摇一摇效果基于html5方向感应deviceorientation，它将底层的方向和运动传感器进行了高级封装，轻松的实现重力感应、指南针等有趣的功能。今天我们以实例展示thinkphp3.2.3实现手机摇一摇随机推荐文章效果。可手机访问www.gouugoyin.cn首页，用手机摇一摇，即可在右侧看到摇一摇随机推荐效果。

[PHP]代码 

首先在需要摇一摇的模板页引入jquery.js和检测手机摇晃的shade.js，HTML结构如下

<script></script><script></script><p>
    </p><h4>
       摇一摇随机推荐
    </h4>
    

      

使用shake.js检测到用户手机摇晃，当摇晃发生时调用函数shakeEventDidOccur()，向服务器发送Ajax请求，JS代码如下 <script> $(function(){ var&nbsp;myShakeEvent&nbsp;=&nbsp;new&nbsp;Shake({&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;threshold:&nbsp;15&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;myShakeEvent.start();&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener('shake',&nbsp;shakeEventDidOccur,&nbsp;false);&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;shakeEventDidOccur&nbsp;()&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; var&nbsp;url&nbsp;=&nbsp;"{:U('home/article/get_rand_list')}"; &nbsp;&nbsp;&nbsp;&nbsp; $.post(url&nbsp;,&nbsp;{&nbsp;num:10,order:'rand()'&nbsp;},&nbsp;function(data){ &nbsp;&nbsp;&nbsp;&nbsp; if(data.status&nbsp;==&nbsp;'ok'){ &nbsp;&nbsp;&nbsp;&nbsp; $(".js_shadeBox&nbsp;ul").append(data.html); &nbsp;&nbsp;&nbsp;&nbsp; }else{ &nbsp;&nbsp;&nbsp;&nbsp; alert(data.msg); &nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp; },&nbsp;'json').error(function(){ &nbsp;&nbsp;&nbsp;&nbsp; alert('&#32593;&#32476;&#38169;&#35823;&#65292;&#35831;&#31245;&#21518;&#20877;&#35797;'); &nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; }); </script> 服务器根据提交的请求参数生成随机文章列表数组并循环拼接好的html代码片段，我们将返回html片段追加到ul里，实现了摇一摇随机推荐的效果，服务器端代码如下 ajaxReturn(array(                 'msg' => '非法登录方式'             ));         }                  //接收参数         $order       = I('order', 'id desc');         $num         = I('num', 0);                  $filter = array();                  if ($category_id) {             $filter['category_id'] = $category_id;         }                  $article_list = M($model)->where($filter)->limit($num)->order($order)->select();                  foreach ($rand_list as $k => $v) {             $html .= "

".$v['title']."

";         }         $this->ajaxReturn(array(             'status' => 'ok',             'html' => $html         ));              } }备注：ThinkPHP3.2.3控制器里获取随机列表的方法是：M($model)->where($where)->order('rand()')->limit($limit)->select();

2. [文件] THINKPHP3.2.3实现手机摇一摇随机推荐文章效果

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

       

php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！