jquery - 了解使用 css3 和 jquery 构建滑动/滑动网络应用程序

Question

我一直在关注这个 tutorial关于使用 css3 和 jquery 构建幻灯片/滑动网络应用程序。尽管这篇文章的解释很透彻，但我很难理解其中的一些概念。如果这些问题很菜鸟，请原谅我，但我真的很想学习。

您可以在此处查看演示和代码 codepen.io .

我在理解这两个函数时遇到了问题:

函数一:function slide()

在 slide() 中，touchPixelRatio 是关于什么的？ deltaSlide 是否足以translate() #slides？

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();
}

函数2:function slideEnd()

之前没有.animate类的时候，#slides是怎么翻译的？ .animate 类只是在 translate 行之后添加的。

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

Answer 1

1. touchPixelRatio 是为了让图像滑动 1 个像素，用户必须用鼠标或手指移动的量。当你在第一张幻灯片上向右滑动或在最后一张幻灯片上向左滑动时，它只会产生拉动的效果，但无法拉到你想要的程度。它会在一段时间后停止(当您到达浏览器窗口的边缘时)。在文章中，他们将其描述为橡皮筋效应，老实说，这似乎是一个足够好的名字。从本质上讲，它只是意味着您的鼠标每移动 3 个像素，图像仅移动 1 个像素。 deltaSlide 足以完成这项工作，但如果他们希望移动与滑动的比率更小一些，以便在最后滑动并朝着一个方向移动，这样就没有更多的幻灯片可以看到了就像它让你在它停止之前只能拉那么远，就像橡皮筋一样，他们添加了这个 touchPixelRatio。

2. 他们使用内联样式取消了之前的动画，这就是为什么在最后两行代码中他们动态生成一个具有变换值的新类，将其插入 DOM，然后添加动画类并删除任何将覆盖新添加的类的内联样式。事实上，如果您查看 slide 函数，您可以看到它们在哪里应用内联样式并删除其上的任何类(很可能是 animate 类，因为调用 不带任何参数的 removeClass 从元素中删除所有类):

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

这会将这些值直接应用于将覆盖任何类样式的元素。因此，为了使 animate 类生效，他们在添加 animate 类后删除了那些内联样式。