有关页面跳转的JS函数的疑问
页面跳转
/* 页面滑动 跳转页面 */
问题一:opt对象应该是什么?
问题二:这个函数的作用是什么?
问题三:这个函数的思想是什么?
function Scrollhref(opt) {
this.Obj = opt.Obj;
this.direction = opt.direction || 'left';
this.ahref = opt.ahref;
this.init();
}
Scrollhref.prototype = {
init: function () {
this.bindEvent();
return this
},
//绑定移动事件
bindEvent: function () {
var that = this;
var startX = 0,
startY = 0,
moveX = 0,
moveY = 0,
preX = 0;
var frame = 0;
var isPageScroll = false;
var isPageSlide = false;
var needExchange = false;
var touchstart = false;
//问题四:这个“touchstart”方法做了哪些事情???
this.Obj.on("touchstart", function (ev) {
startX = preX = ev.changedTouches[0].clientX;
startY = ev.changedTouches[0].clientY;
touchstart = true;
});
//问题五:这个“touchmove”方法做了哪些事情???
$(document).on("touchmove", function (ev) {
frame++;
if (frame > 2) {
if (isPageSlide && touchstart) {
ev.preventDefault();
moveX = ev.changedTouches[0].clientX - preX;
if (that.direction == "left") {
if (moveX < 0 && isPageSlide) {
that.pgTransform(".3", "-50");
needExchange = true;
}
if (moveX > 0 && isPageSlide) {
that.pgTransform(".1", "0");
needExchange = false;
}
} else if (that.direction == "right") {
if (moveX > 0 && isPageSlide) {
that.pgTransform(".3", "50");
needExchange = true;
}
if (moveX < 0 && isPageSlide) {
that.pgTransform(".1", "0");
needExchange = false;
}
}
preX = ev.changedTouches[0].clientX;
} else {
moveY = ev.changedTouches[0].clientY - startY;
moveX = ev.changedTouches[0].clientX - startX;
preX = ev.changedTouches[0].clientX;
if (Math.abs(moveX) > Math.abs(moveY * 2)) {
isPageSlide = isPageSlide || true;
ev.preventDefault();
} else {
isPageScroll = true;
}
}
frame = 0;
}
});
//问题六:“touchend”方法做了哪些事情???
$(document).on("touchend", function (ev) {
if (needExchange) {
that.Obj.removeAttr("style");
window.location.href = that.ahref;
}
isPageScroll = false;
isPageSlide = false;
needExchange = false;
touchstart = false;
});
return that;
},
//问题七:“pgTransform”做了哪些事情???
pgTransform: function (time, val) {
var that = this;
that.Obj.css({"transition": time + "s", "-webkit-transition": time + "s", "transform": "translateX(" + val + "px)", "-webkit-transform": "translateX(" + val + "px)", "transition-timing-function": "ease-out", "-webkit-transition-timing-function": "ease-out"});
}
}