有关页面跳转的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"});
}
}
/* 页面滑动 跳转页面 */
问题一: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"});
}
}
...全文
相关推荐
JS给按钮添加跳转功能类似a标签
这段代码的结尾处,还有一段文字说明:“以上所述是小编给大家介绍的JS给按钮添加跳转功能类似a标签,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!”
vue中页面跳转拦截器的实现方法
Vue.js中页面跳转拦截器是一种控制用户访问权限的技术,通常用于在用户跳转到某个页面之前,判断用户是否具有访问该页面的权限。
javascript实现类似超链接的效果
在Web开发中,超链接是一种非常常见的元素,它允许用户点击跳转到另一个页面或者位置。而JavaScript是一种可以让我们在网页中添加动态交互的脚本语言。
JS页面跳转和js对iframe进行页面跳转、刷新
在IT领域,特别是前端开发中,JavaScript(简称JS)被广泛用于实现网页的动态功能,包括页面跳转和对iframe内的页面进行跳转与刷新。
基于JS实现操作成功之后自动跳转页面
这种功能可以通过JavaScript实现,本文将详细介绍如何利用JavaScript实现操作成功后的自动跳转页面。


