前段时间看到一个效果比较有意思，特此记录一下
这个地方主要是利用了设备自带的方向检测功能,随着设备的角度不同，给图标加上一点滚动效果
处理方向的事件
window.addEventListener('deviceorientation',function(e){
var alpha = e.aplha;
var beta = e.beta;
var gamma = e.gamma;
console.log('alpha:'+alpha+',beta:'+beta+',gamma:'+gamma);
});
借用一张图来解释下alpha，beta,gamma的关系
理解了概念之后，就可以开始使用这个值做点事了。但是这里有一个问题就是，我们并不能用单一的值去做计算，并且方向通常还和手机的放置位置有关，并且在Android上陀螺仪的数据不是很稳定，需要加一些方法做缓冲。
还好有一个组件已经处理好了上面的那些问题，并且还单独提供了两个计算出来的值，分别是lon,lat,字面意思是经度和纬度，可以当成平移的距离
var clientWidth = document.documentElement.clientWidth;
var left = (600 - clientWidth)/2;
$('div').css('left','-' + left +'px');
// 这里主要是让图片居中，为了效果好一点，选择双倍图然后进行缩放
var ori = new Orienter();
ori.onOrient = function(obj){
var a,b;
a = obj.lon < 180 ? obj.lon : obj.lon - 360; //计算出来的lon是0~360 转换为180~-180
b = obj.lat;
a = a > 0 ? a > left ? left : a : a < '-' + left ? '-' + left : a;
b = b > 0 ? b > 20 ? 20 : b : b < -20 ? -20 : b;
// 控制移动范围
$('.demo').css("-webkit-transform","translate3d("+ a +"px,"+b+"px,0)");
}
ori.init();
