我们还需要完成一些事情，才能搞定这个方法。目前，我们已经实现了触控手势和鼠标拖拽。
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 (minX + 0.01) / (minY + 0.01)); if (isX) { if (x > minX && !!options.turnLeft) options.turnLeft(ele, x); else if (x 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 元素。
样式如下。
#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 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在线视频教程可以免费观看！
以上就是如何创造一个水平的滑动模块？网页元素的滑动事件实例代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608538.html
微信扫一扫 
支付宝扫一扫 
