我为我正在处理的工具包制作了一个滚动脚本,但它似乎很自然,我不知道如何让它更流畅,也许有人可以帮助我解决:)
代码! :)
var startX, offsetX, extraX, diffX, newX, thisElement = $("#productContainer");
thisElement[0].addEventListener("touchstart", function(e) {
offsetX = ($(window).width()-thisElement.outerWidth(true));
startX = e.targetTouches[0].pageX - offsetX;
console.log("offsetX: "+offsetX+" | "+"startX: "+startX);
}, false);
thisElement[0].addEventListener("touchmove", function(e) {
e.preventDefault();
getTransform();
diffX = Math.floor(((startX - e.changedTouches[0].pageX) + offsetX)/30);
currentX = results[5];
extraX = 60;
newX = currentX-diffX;
if(newX < offsetX)
newX = offsetX;
else if(newX > 0)
newX = 0;
thisElement.css("-webkit-transform", "translate3d("+newX+"px, 0, 0)");
}, false);
function getTransform() {
results = $("#productContainer").css('-webkit-transform').match(/matrix(?:(3d)(-{0,1}d+(?:, -{0,1}d+)*(?:, (-{0,1}d+))(?:, (-{0,1}d+))(?:, (-{0,1}d+)), -{0,1}d+)|(-{0,1}d+(?:, -{0,1}d+)*(?:, (-{0,1}d+))(?:, (-{0,1}d+))))/);
if(!results) return [0, 0, 0];
if(results[1] == '3d') {
return results.slice(2,5);
}
results.push(0);
return results.slice(5, 8);
}
我强烈建议您使用 o swipe.js 插件进行 jQuery。
这样,触摸检测将实现100%,滑块将跟随您的手指,因为它发生在本机移动应用程序中。
非常易于使用。