有关页面跳转的JS函数的疑问

palljs001 2015-07-21 10:46:22
页面跳转
/* 页面滑动 跳转页面 */
问题一: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"});
}
}
...全文
119 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
starrycheng 2015-08-14
  • 打赏
  • 举报
回复
js实现滑动页面。
palljs001 2015-07-22
  • 打赏
  • 举报
回复
引用 1 楼 sydhr_1994 的回复:
你把所有代码全问了
求解答啊。。。
sydhr_1994 2015-07-21
  • 打赏
  • 举报
回复
你把所有代码全问了

87,994

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧