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