??我们还需要完成一些事情，才能搞定这个方法。目前，我们已经实现了触控手势和鼠标拖拽。
function addSlide(element, options) {
// Validate arguments...
// Resolve element...
// Touch supports...
// Mouse supports...
// ToDo: Implement it.
return null;
}
现在我们来处理返回值。这将是一个包含能够注销滑动事件的方法的对象。
return {
dispose: function () {
// Remove touch events.
ele.removeEventListener("touchstart", touchStart, false);
if (!!touchMove)
ele.removeEventListener("touchmove", touchMove, false);
ele.removeEventListener("touchend", touchEnd, false);
// Remove mouse event.
ele.removeEventListener("mousedown", mouseDown, false);
}
};
至此，大功告成！我们来看一下最终代码。
/**
* Adds gesture handlers.
* @param element the target element.
* @param options the options.
*/
function addSlide(element, options) {
if (!options || !element) return {
dispose: function () { }
};
// Get the element.
var ele = !!element && typeof element === "string" ? document.getElementById(element) : element;
if (!ele) return {
dispose: function () { }
};
// Get the minimum moving distances.
var minX = options.minX;
var minY = options.minY;
if (minX == null || minX < 0) minX = 1;
minX = Math.abs(minX);
if (minY == null || minY < 0) minY = 1;
minY = Math.abs(minY);
// The handler occured after moving.
var moved = function (x, y) {
var isX = !y || (Math.abs(x) / Math.abs(y)
> (minX + 0.01) / (minY + 0.01));
if (isX) {
if (x > minX && !!options.turnLeft)
options.turnLeft(ele, x);
else if (x < -minX && !!options.turnRight)
options.turnRight(ele, -x);
} else {
if (y > minY && !!options.turnUp)
options.turnUp(ele, y);
else if (y < -minY && !!options.turnDown)
options.turnDown(ele, -y);
}
if (!!options.moveEnd)
options.moveEnd(ele, x, y);
};
// Touch starting event handler.
var start = null;
var touchStart = function (ev) {
start = {
x: ev.targetTouches[0].pageX,
y: ev.targetTouches[0].pageY
};
if (!!options.moveStart)
options.moveStart(ele);
};
ele.addEventListener("touchstart", touchStart, false);
// Touch moving event handler.
var touchMove = !!options.moving
? function (ev) {
var point = ev.touches ? ev.touches[0] : ev;
if (!point) return;
var coor = {
x: point.pageX - start.x,
y: point.pageY - start.y
};
options.moving(ele, coor.x, coor.y);
}
: null;
if (!!touchMove)
ele.addEventListener("touchmove", touchMove, false);
// Touch ending event handler.
var touchEnd = function (ev) {
if (start == null) return;
var x = ev.changedTouches[0].pageX - start.x;
var y = ev.changedTouches[0].pageY - start.y;
start = null;
moved(x, y);
};
ele.addEventListener("touchend", touchEnd, false);
// Mouse event handler.
var mouseDown = function (ev) {
// Record current mouse position
// when mouse down.
var mStartP = getMousePosition();
// Mouse moving event handler.
var mouseMove = function (ev) {
var mCurP = getMousePosition();
var x = mCurP.x - mStartP.x;
var y = mCurP.y - mStartP.y;
options.moving(ele, x, y);
};
document.body.addEventListener("mousemove", mouseMove, false);
// Mouse up event handler.
// Need remove all mouse event handlers.
var mouseUpHandlers = [];
var mouseUp = function (ev) {
mouseUpHandlers.forEach(function (h, hi, ha) {
h(ev);
});
};
mouseUpHandlers.push(
function () {
document.body.removeEventListener("mousemove", mouseMove, false);
},
function () {
document.body.removeEventListener("mouseup", mouseUp, false);
},
function (ev) {
var mCurP = getMousePosition();
var x = mCurP.x - mStartP.x;
var y = mCurP.y - mStartP.y;
moved(x, y);
}
);
document.body.addEventListener("mouseup", mouseUp, false);
};
ele.addEventListener("mousedown", mouseDown, false);
// Return a disposable object
// for removing all event handlers.
return {
dispose: function () {
// Remove touch events.
ele.removeEventListener("touchstart", touchStart, false);
if (!!touchMove)
ele.removeEventListener("touchmove", touchMove, false);
ele.removeEventListener("touchend", touchEnd, false);
// Remove mouse event.
ele.removeEventListener("mousedown", mouseDown, false);
}
};
}
现在我们来进行一个测试。假设有这样一个 DOM 元素。
<p id="demo_gesture">
<p id="demo_gesture_fore">
</p>
</p>
样式如下。
#demo_gesture {
max-width: 800px;
height: 20px;
background-color: #EEE;
border: 1px solid #CCC;
border-radius: 10px;
position: relative;
overflow: hidden;
}
#demo_gesture > #demo_gesture_fore {
color: #CCC;
text-align: center;
width: 20px;
height: 20px;
background-color: #CCC;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
cursor: pointer;
}
当文档元素加载完后，我们执行以下代码。
var adjustPosition = function (ele, x) {
x = (ele.position || 0) + x;
if (x < 0)
x = 0;
else if (x > ele.parentElement.offsetWidth - ele.offsetWidth)
x = ele.parentElement.offsetWidth - ele.offsetWidth;
ele.style.left = x + "px";
return x;
};
addSlide("demo_gesture_fore", {
moving: function (ele, pos) {
adjustPosition(ele, pos.x);
},
moveEnd: function (ele, pos) {
ele.position = adjustPosition(ele, pos.x);
}
});
需要学习CSS的同学请关注CSS视频教程，众多css在线视频教程可以免费观看！
以上就是如何创造一个水平的滑动模块？网页元素的滑动事件实例代码的详细内容，更多请关注其它相关文章！
