了解如何使用css3和jquery构建滑动/滑动web应用程序

我一直在使用css3和jquery构建一个幻灯片/滑动web应用程序。虽然这篇文章解释得很透彻，但我很难理解其中的一些概念。如果这些问题很难回答，请原谅，但我真的很想学习

你可以在这里看到演示和代码

我无法理解这两个功能：

函数1:

函数幻灯片（）

在

slide（）

中，

touchPixelRatio

是关于什么的？

deltaSlide

是否足以

translate（）

幻灯片

if (sliding == 2) {
    var touchPixelRatio = 1;
    if ((currentSlide == 0 && event.clientX > startClientX) || (currentSlide == slideCount - 1 && event.clientX < startClientX))
        touchPixelRatio = 3;
    pixelOffset = startPixelOffset + deltaSlide / touchPixelRatio;
    $('#slides').css('transform', 'translate3d(' + pixelOffset + 'px,0,0)').removeClass();
}

touchPixelRatio

是用户为了使图像滑动1像素而必须用鼠标或手指进行的移动量。当你在第一张幻灯片上向右滑动，或在最后一张幻灯片上向左滑动时，它只会产生拉动的效果，但不能拉动到你想要的程度。它会在一段时间后停止（当您点击浏览器窗口的边缘时）。在这篇文章中，他们将其描述为橡皮筋效应，老实说，这似乎是一个足够好的名字。本质上，这意味着鼠标每移动3个像素，图像只移动1个像素

deltaSlide

足以完成这项工作，但如果他们希望移动与滑动的比率稍微小一点，以便在末端滑动，并朝着一个没有更多幻灯片可看的方向移动，看起来它让你在停止之前只能拉这么远，就像橡皮筋一样，他们添加了这个

touchPixelRatio

他们使用内联样式删除了上一个动画，这就是为什么在最后两行代码中，他们使用变换值动态生成一个新类，将其插入DOM，然后添加animate类并删除任何会覆盖新添加的类的内联样式。事实上，如果查看

slide

函数，您可以看到它们在哪里应用了内联样式并删除了其中的任何类（最有可能的是

animate

类，因为调用

removeClass

时没有任何参数会删除元素中的所有类）：

这将直接将这些值应用于元素，该元素将覆盖任何类样式。因此，为了使

animate

类生效，它们在添加

animate

类后删除这些内联样式

$('<style id="temp">#slides.animate{transform:translate3d(' + pixelOffset + 'px,0,0)}</style>').appendTo('head');
$('#slides').addClass('animate').css('transform', '');

$('#slides').css('transform', 'translate3d(' + pixelOffset + 'px,0,0)').removeClass();