地址:
http://github.com/zynga/scroller
http://zynga.github.io/scroller/
想使用javascript的触摸事件写一个,可以划屏的功能。找到该插件。
好像还是一个游戏公司的作品:http://tech.163.com/12/0302/11/7RJAM75J00094L5O.html
“美的”的前端也在使用这个:https://zhuanlan.zhihu.com/p/31293136
该组件不同于iscroll之类的组件,它不对实际元素进行移位操作,而是仅仅根据手势,实时返回一个当前的滚动距离值,结合组件改变绘制原点的使用示例。
我对demo的代码稍作修改,更容易看明白。
<!DOCTYPE HTML> <html> <head> <title>Scroller - Paging X</title> <script src="../src/Scroller.js"></script> <style type="text/css"> #container{ width: 400px; height: 400px; border: 5px solid black; position: absolute; top: 20px; left: 20px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #content{ background: white; width: 4800px; height: 400px; white-space: nowrap; -webkit-transform-origin: left top; -webkit-transform: translateZ(0); -moz-transform-origin: left top; -moz-transform: translateZ(0); -ms-transform-origin: left top; -ms-transform: translateZ(0); -o-transform-origin: left top; -o-transform: translateZ(0); transform-origin: left top; transform: translateZ(0); } .cell{ width: 400px; line-height: 400px; height: 100%; display: inline-block; text-align: center; font-family: sans-serif; font-size: 50px; } </style> </head> <body> <div id="container"> <div id="content"> </div> </div> <script type="text/javascript"> var container = document.getElementById("container"); var content = document.getElementById("content"); // Content Generator var size = 400; var frag = document.createDocumentFragment(); for (var cell=0, cl=content.clientWidth/size; cell<cl; cell++) { elem = document.createElement("div"); elem.className = "cell"; elem.style.backgroundColor = cell%2 > 0 ? "#ddd" : ""; elem.innerHTML = cell; frag.appendChild(elem); } content.appendChild(frag); // Initialize Scroller var scroller = new Scroller(function(left, top, zoom) { content.style.marginLeft = left ? (-left/zoom) + 'px' : ''; content.style.marginTop = top ? (-top/zoom) + 'px' : ''; content.style.zoom = zoom || ''; }, { scrollingY: false, paging: true }); // Setup Scroller var rect = container.getBoundingClientRect(); scroller.setPosition(rect.left+container.clientLeft, rect.top+container.clientTop); scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight); // Event Handler if ('ontouchstart' in window) { container.addEventListener("touchstart", function(e) { // Don't react if initial down happens on a form element if (e.target.tagName.match(/input|textarea|select/i)) { return; } scroller.doTouchStart(e.touches, e.timeStamp); e.preventDefault(); }, false); document.addEventListener("touchmove", function(e) { scroller.doTouchMove(e.touches, e.timeStamp); }, false); document.addEventListener("touchend", function(e) { scroller.doTouchEnd(e.timeStamp); }, false); } else { var mousedown = false; container.addEventListener("mousedown", function(e) { // Don't react if initial down happens on a form element if (e.target.tagName.match(/input|textarea|select/i)) { return; } scroller.doTouchStart([{ pageX: e.pageX, pageY: e.pageY }], e.timeStamp); mousedown = true; }, false); document.addEventListener("mousemove", function(e) { if (!mousedown) { return; } scroller.doTouchMove([{ pageX: e.pageX, pageY: e.pageY }], e.timeStamp); mousedown = true; }, false); document.addEventListener("mouseup", function(e) { if (!mousedown) { return; } scroller.doTouchEnd(e.timeStamp); mousedown = false; }, false); } </script> </body> </html>
修改时间 2017-12-29
真诚赞赏,手留余香
赞赏