javascript原生移动drag效果之touch.drag.js
- WBOYOriginal
- 2016-06-07 11:36:381308browse
手机页面的上下左右拖动效果.
详情请阅读: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元