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

首先在需要摇一摇的模板页引入jquery.js和检测手机摇晃的shade.js，HTML结构如下：<script src="{JS_PATH}/jquery-1.7.1.min.js"></script>
<script src="{JS_PATH}/shake.js"></script>
<div class="sidebar-widget js_shadeBox">
    <h4>
       摇一摇随机推荐
    </h4>
    <ul>
 
    </ul>
</div>然后使用shake.js检测到用户手机摇晃，当摇晃发生时调用函数shakeEventDidOccur()，向服务器发送Ajax请求，JS代码如下：<script>
$(function(){
    var myShakeEvent = new Shake({  
        threshold: 15  
    });  
  
    myShakeEvent.start();  
  
    window.addEventListener('shake', shakeEventDidOccur, false);  
  
    function shakeEventDidOccur () { 
        var url = "{:U('home/article/get_rand_list')}";
        $.post(url , { num:10,order:'rand()' }, function(data){
            if(data.status == 'ok'){
                $(".js_shadeBox ul").append(data.html);
            }else{
                alert(data.msg);
            }
        }, 'json').error(function(){
            alert('网络错误，请稍后再试');
        });
    } 
});
</script>服务器根据提交的请求参数生成随机文章列表数组并循环拼接好的html代码片段，我们将返回html片段追加到ul里，实现了摇一摇随机推荐的效果。
PS：为方便大家使用，特将所有涉及的代码和数据库打包上传，下载地址：http://www.gouguoyin.cn/php/62.html