手机页面的上下左右拖动效果.
详情请阅读:https://git.oschina.net/wuquanyao/touch.drag.js
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//+ author:wuquanyao
//+ email:wqynqa@163.com
//+ nickname:挪威森林
//+ touch.drag-1.0.0.js,测试版
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
var touch = {};
(function(touch){
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    //+ config参数{seletor:'',direction:1, factor:1}
    //+ selector:css选择器;
    //+ direction:0|1|2,0垂直方向,1水平方向,2综合方向;
    //+ factor:弹性因子,0到1,值越大,阻尼越大
    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    touch.drag = function(config){
config = config || {selector:'body',direction:1,factor:0.7};
var ele,
pos    = {x:'',y:''},
press  = {x:'',y:''},
events = ['touchstart','touchmove','touchend','touchcancel'];
ele = document.queryselector(config['selector']);
ele.addeventlistener(events[0],function(event){
event.preventdefault();
pos['x'] = event.currenttarget.getboundingclientrect().left;
pos['y'] = event.currenttarget.getboundingclientrect().top;
press['x'] = event.touches[0].pagex;
press['y'] = event.touches[0].pagey;
},false);
        ele.addeventlistener(events[1],function(event){
event.preventdefault();
if(event.targettouches.length>1)return false;
var move = {x:null,y:null};
            //x>0向右，x            move['x'] = (event.touches[0].pagex - press['x'])*(1-config.factor);
            //y>0向上，y            move['y'] = (event.touches[0].pagey - press['y'])*(1-config.factor);
switch(config.direction){
case 0: translate = 'translate(0,'+move['y']+'px)';
                        break;
case 1: translate = 'translate('+move['x']+'px,0)';
                        break;
case 2: translate = 'translate('+move['x']+'px,'+move['y']+'px)'; 
                        break;
default:translate = 'translate('+move['x']+'px,0)';
            }
event.currenttarget.style.webkittransform = translate;
},false);
ele.addeventlistener(events[2],function(event){
event.preventdefault();
event.currenttarget.style.webkittransform = 'translate('+pos['x']+'px,'+pos['y']+'px)';
},false);
    }
})(touch);
qq截图20151027102555.png ( 150.15 kb 下载：35 次 )
ad：真正免费，域名+虚机+企业邮箱=0元