0

例如，我有兴趣制作像http://littlemonsters.com/这样的整个页面滑块。我查看了他们的代码并试图弄清楚

- 他们是如何制作整个页面的幻灯片（我猜这只是一个非常大的滑块），还有

- 尽管各个“页面”彼此堆叠（就像普通页面一样），但当它们滑动时，它们会左右滑动（我猜是整个滑块问题的一部分）

似乎对于许多滑块插件来说，它们以某种方式将列表项水平化（而当我手动做滑块时，我制作了一个非常长的宽列表，宽度为 9999px，并且有一个溢出隐藏的查看窗口——这可能不是最好的方法） . 这是我在上述网站上找到的一些 js，我认为这些 js 是关键，但我不太了解/不完整。

step = (id) ->
  width = $(window).width()
  dir = 1
  dir = -1  if id < curId
  curId = id
  $(".boxDisplay").animate
    left: -1 * dir * width
  , 500, "swing", ->
    $(this).css "left", 0
    $(this).removeClass "boxDisplay"
    next = $(".box:eq(" + (id - 1) + ")")
    next.addClass "boxDisplay"
    boxPosition()
    next.css "left", dir * width
    next.animate
      left: 0
    , 500, "swing"
animate = ->
  i = 0
  $(".box").animate(
    left: -50
  , 10).animate(
    left: 0
  , 50).animate(
    left: 50
  , 10).animate(
    left: 0
  , 50).animate(
    left: -25
  , 10).animate(
    left: 0
  , 50).animate(
    left: 25
  , 10).animate(
    left: 0
  , 50).animate
    left: 0
  , 800
boxPosition = ->
  height = $(".boxDisplay").height()
  $(".box").css "margin-top", ($(window).height() / 2) - (height / 2)

$(document).ready ->
  boxPosition()

谢谢！

4

0 回答 0