移動端頁面的盛行,微信的便利的頁面推廣等等,讓越來越多的css3效果和html5在手機端大放異彩。
於是乎,各式各樣的簡約酷炫的html5頁面層出不窮,最多的就是視差滾動+css3動畫。
接下來就說說自己在搞這些頁面裏面碰到的一個小問題-------zepto.js裏面,坑爹的touch.js的上下滑動(swipe)事件失效。
在舉例之前,先科普一下如何在pc端,查看html5頁面在各種分辨率的手機的展示情況。
最常見的就是利用谷歌的手機模擬器。
步驟1:打開谷歌瀏覽器,按F12.
步驟2:然後按截圖裏面的步驟,選擇各種分辨率,在刷新一下頁面,就可以看到效果。
注:各種手機的選擇
開始描述問題之前,先提供幾個網址,
讓你們試試能不能看到效果。
(function($) {
var options, Events, Touch;
options = {
x: 20,
y: 20
};
Events = ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'tap', 'longTap', 'drag'];
Events.forEach(function(eventName) {
$.fn[eventName] = function() {
var touch = new Touch($(this), eventName);
touch.start();
if (arguments[1]) {
options = arguments[1]
}
return this.on(eventName, arguments[0])
}
});
Touch = function() {
var status, ts, tm, te;
this.target = arguments[0];
this.e = arguments[1]
};
Touch.prototype.framework = function(e) {
e.preventDefault();
var events;
if (e.changedTouches) events = e.changedTouches[0];
else events = e.originalEvent.touches[0];
return events
};
Touch.prototype.start = function() {
var self = this;
self.target.on("touchstart",
function(event) {
event.preventDefault();
var temp = self.framework(event);
var d = new Date();
self.ts = {
x: temp.pageX,
y: temp.pageY,
d: d.getTime()
}
});
self.target.on("touchmove",
function(event) {
event.preventDefault();
var temp = self.framework(event);
var d = new Date();
self.tm = {
x: temp.pageX,
y: temp.pageY
};
if (self.e == "drag") {
self.target.trigger(self.e, self.tm);
return
}
});
self.target.on("touchend",
function(event) {
event.preventDefault();
var d = new Date();
if (!self.tm) {
self.tm = self.ts
}
self.te = {
x: self.tm.x - self.ts.x,
y: self.tm.y - self.ts.y,
d: (d - self.ts.d)
};
self.tm = undefined;
self.factory()
})
};
Touch.prototype.factory = function() {
var x = Math.abs(this.te.x);
var y = Math.abs(this.te.y);
var t = this.te.d;
var s = this.status;
if (x < 5 && y < 5) {
if (t < 300) {
s = "tap"
} else {
s = "longTap"
}
} else if (x < options.x && y > options.y) {
if (t < 250) {
if (this.te.y > 0) {
s = "swipeDown"
} else {
s = "swipeUp"
}
} else {
s = "swipe"
}
} else if (y < options.y && x > options.x) {
if (t < 250) {
if (this.te.x > 0) {
s = "swipeLeft"
} else {
s = "swipeRight"
}
} else {
s = "swipe"
}
}
if (s == this.e) {
this.target.trigger(this.e);
return
}
}
})(window.jQuery || window.Zepto);
Author: Alone
Antroduction: 高級前端開發工程師
Sign: 人生沒有失敗,只有沒到的成功。
博主相關文章推薦:
輕輕談一下seaJs——模塊化開發的利器
有趣的前端題目,看了不後悔
移動端前端開發概述
淺談 標籤的語義化
淺談鼠標滾輪事件
不積跬步無以至千里----高度自適應的textarea
sass和less,優秀的前端樣式預處理器