javascript原生移动drag效果之touch.drag.js

手机页面的上下左右拖动效果.
详情请阅读:https://git.oschina.net/wuquanyao/touch.drag.js
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++<br> //+ author:wuquanyao<br> //+ email:wqynqa@163.com<br> //+ nickname:挪威森林<br> //+ touch.drag-1.0.0.js,测试版<br> //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++<br> var Touch = {};<br> (function(Touch){<br> <br>     //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++<br>     //+ config参数{seletor:'',direction:1, factor:1}<br>     //+ selector:css选择器;<br>     //+ direction:0|1|2,0垂直方向,1水平方向,2综合方向;<br>     //+ factor:弹性因子,0到1,值越大,阻尼越大<br>     //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++<br>     Touch.drag = function(config){<br> <br>         config = config || {selector:'body',direction:1,factor:0.7};<br> <br>         var ele,<br> <br>             pos    = {x:'',y:''}, <br> <br>             press  = {x:'',y:''},<br> <br>             events = ['touchstart','touchmove','touchend','touchcancel'];<br> <br>         ele = document.querySelector(config['selector']);<br> <br>         ele.addEventListener(events[0],function(event){<br>             <br>             event.preventDefault();<br> <br>             pos['x'] = event.currentTarget.getBoundingClientRect().left;<br> <br>             pos['y'] = event.currentTarget.getBoundingClientRect().top;<br> <br>             press['x'] = event.touches[0].pageX;<br> <br>             press['y'] = event.touches[0].pageY;<br> <br>         },false);<br>         ele.addEventListener(events[1],function(event){<br> <br>             event.preventDefault();<br> <br>             if(event.targetTouches.length>1)return false;<br> <br>             var move = {x:null,y:null};<br>             //x>0向右，x             move['x'] = (event.touches[0].pageX - press['x'])*(1-config.factor);<br>             //y>0向上，y             move['y'] = (event.touches[0].pageY - press['y'])*(1-config.factor);<br> <br>             switch(config.direction){<br> <br>                 case 0: translate = 'translate(0,'+move['y']+'px)';<br>                         break;<br> <br>                 case 1: translate = 'translate('+move['x']+'px,0)';<br>                         break;<br> <br>                 case 2: translate = 'translate('+move['x']+'px,'+move['y']+'px)'; <br>                         break;<br> <br>                 default:translate = 'translate('+move['x']+'px,0)';<br>             }<br> <br>             event.currentTarget.style.webkitTransform = translate;<br> <br>         },false);<br> <br>         ele.addEventListener(events[2],function(event){            <br> <br>             event.preventDefault();<br> <br>             event.currentTarget.style.webkitTransform = 'translate('+pos['x']+'px,'+pos['y']+'px)';<br> <br>         },false);<br>     }<br> })(Touch);

QQ截图20151027102555.png ( 150.15 KB 下载：35 次 )

AD：真正免费，域名+虚机+企业邮箱=0元