329
地址：
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
真诚赞赏，手留余香
赞赏
