當(dāng)前位置: 首頁(yè) > 網(wǎng)站開(kāi)發(fā) > 正文
JQ手機(jī)端手勢(shì)滑動(dòng)事件代碼
妙網(wǎng)小編 發(fā)表于2016年8月31日 21:07
移動(dòng)（手機(jī)+平板）開(kāi)發(fā)中經(jīng)常會(huì)用到手指滑動(dòng)時(shí)調(diào)用某些方法，成熟的框架如jQuery mobile，zepto等都有相關(guān)的封裝，但是在一些輕量級(jí)的開(kāi)發(fā)中為了應(yīng)用這個(gè)左右滑動(dòng)，就把這整個(gè)框架引用進(jìn)來(lái)，有點(diǎn)殺雞用牛刀的感覺(jué)。鑒于此，我在最近的項(xiàng)目開(kāi)發(fā)中封裝了jquery.swipe.js的插件。
用法:{left:function(){},right:function(){},up:function(){},down:function(){}}
即在手指滑動(dòng)時(shí)自動(dòng)判斷滑動(dòng)方向，并且無(wú)論怎樣劃動(dòng)，只會(huì)有一個(gè)方向，不會(huì)有左上，右下這樣的方向產(chǎn)生，故每次只會(huì)調(diào)用一下方向?qū)?yīng)的回調(diào)函數(shù)。在此插件中，由于采用了敏感距離的算法，只有在劃動(dòng)超過(guò)該距離時(shí)才會(huì)實(shí)現(xiàn)指定方向的確認(rèn)，否則劃動(dòng)被視為無(wú)效（為什么會(huì)有這樣的算法？因?yàn)槲覀冊(cè)诨瑒?dòng)時(shí)，有可能會(huì)出現(xiàn)有意無(wú)意的拖動(dòng)，如果手指稍微觸碰一下，就有相應(yīng)方向的確認(rèn)，有點(diǎn)與現(xiàn)實(shí)不符，故加入了敏感距離，此插件中敏感距離為120，使用者可以自行修改）。
源碼：
(function($) {
var old = $.fn.swipe;
$.fn.swipe = function(option) {
var opt = {
'left': $.noop,
'right': $.noop,
'up': $.noop,
'down': $.noop
};
if ($.type(option) == 'string') {
switch (option.toLowerCase()) {
case 'left':
if (this.data('opt').left && $.isFunction(this.data('opt').left)) {
this.data('opt').left.call(this);
}
break;
case 'right':
if (this.data('opt').right && $.isFunction(this.data('opt').right)) {
this.data('opt').right.call(this);
}
break;
case 'up':
if (this.data('opt').up && $.isFunction(this.data('opt').up)) {
this.data('opt').up.call(this);
}
break;
case 'down':
if (this.data('opt').down && $.isFunction(this.data('opt').down)) {
this.data('opt').down.call(this);
}
break;
default:
break;
}
return this;
} else if ($.isPlainObject(option)) {
var clone = {};
//大小寫不敏感處理
$.each(option, function(k, v) {
clone[k.toLowerCase()] = v;
});
$.extend(opt, clone);
return this.each(function(index, ele) {
//敏感距離
var dis = 120;
//各元素賦值，備直接觸發(fā)時(shí)用
$(ele).data('opt', $.extend({}, opt)).on('touchstart mousedown',function(e){
var ev=e.type=='touchstart'?e.originalEvent.touches[0]:e,
startX = ev.pageX,
startY = ev.pageY,
startLeft = $(this).position().left,
startTop = $(this).position().top,
start = {
left: startLeft,
top: startTop
},
disX = startX - startLeft,
disY = startY - startTop;
$(document).on('touchmove.swipe.founder mousemove.swipe.founder',function(e){
var ev=e.type=='touchmove'?e.originalEvent.touches[0]:e;
if (opt.left != $.noop || opt.right != $.noop) {
$(ele).css('left', ev.pageX - disX - $(ele).offsetParent().offset().left + 'px');
}
if (opt.up != $.noop || opt.down != $.noop) {
$(ele).css('top', ev.pageY - disY - $(ele).offsetParent().offset().top + 'px');
}
e.preventDefault();
});
$(document).on('touchend.swipe.founder mouseup.swipe.founder',function(e){
var ev=e.type=='touchend'?e.originalEvent.changedTouches[0]:e,
endX = ev.pageX,
endY = ev.pageY,
x = Math.abs(endX - startX),
y = Math.abs(endY - startY),
direction = null;
//必須在指定dis大小外，消除敏感距離
direction = x >= y ? (endX < startX ? (Math.abs(endX - startX) > dis ? 'left' : null) : (Math.abs(endX - startX) > dis ? 'right' : null)) : (endY < startY ? (Math.abs(endY - startY) > dis ? 'up' : null) : (Math.abs(endY - startY) > dis ? 'down' : null));
switch (direction) {
case 'left':
if (opt.left && $.isFunction(opt.left)) {
opt.left.call(ele);
}
break;
case 'right':
if (opt.right && $.isFunction(opt.right)) {
opt.right.call(ele);
}
break;
case 'up':
if (opt.up && $.isFunction(opt.up)) {
opt.up.call(ele);
}
break;
case 'down':
if (opt.down && $.isFunction(opt.down)) {
opt.down.call(ele);
}
break;
default:
//復(fù)位
$(ele).animate({
'left': start.left + 'px',
'top': start.top + 'px'
});
break;
}
$(document).off('.swipe.founder');
});
});
});
} else {
throw new Error('%E5%8F%82%E6%95%B0%E9%94%99%E8%AF%AF！');
}
};
$.fn.swipe.noConflict = function() {
$.fn.swipe = old;
return this;
};
})(jQuery);
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手勢(shì)+鼠標(biāo)</title>
<style type="text/css">
#div1 {
text-align: center;
width: 100px;
height: 100px;
line-height: 100px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<div id="div1"></div>
<script src="../js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.swipe.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#div1').swipe({
left: function(){
$(this).text('向左運(yùn)動(dòng)');
},
right: function(){
$(this).text('向右運(yùn)動(dòng)');
},
up: function(){
$(this).text('向上運(yùn)動(dòng)');
},
down: function(){
$(this).text('向下運(yùn)動(dòng)');
}
});
</script>
</body>
</html>
隨機(jī)文章推薦 收藏本文
共有6198閱 / 0評(píng)我要評(píng)論
- 還沒(méi)有評(píng)論呢，快搶沙發(fā)~
發(fā)表你的評(píng)論吧返回頂部
!評(píng)論內(nèi)容需包含中文