Question

我想知道页面之间的幻灯片效果是如何在该网页上完成的。我想在两个页面之间做同样的事情但是水平地做。我想它可能使用jQuery，但如果有人能提供一些线索，那就太棒了

http://evancoleman.net

[更新] slideUp / slideDown

我尝试过JKirchartz的方法，但它不像我想的那样工作。 slideUp()和slideDown() jQuery函数仅隐藏和显示具有垂直幻灯片效果的元素。我想要一种可以切换具有垂直和水平滑动效果的页面的技术。

谢谢

Answer 1

<强>更新

您可以使用jQuery Cycle plugin来模拟此效果：http://jsfiddle.net/JKirchartz/zLekb/

基本上是相同的CSS，但jQuery却是这样的：

$(function(){
    $("#site").cycle({
        fx : "scrollHorz",
        next : ".next a",
        prev : ".prev a",
        startingSlide : 1,
        timeout : 0
    });
  });

和prev＆amp;下一个按钮有点不同：

<div class="next"><a href="#">&raquo;</a></div>
...
<div class="prev"><a href="#">&laquo;</a></div>

css并不完美，但足够接近......

原始答案

这是一个快速的＆amp;技术的肮脏例子：http://jsfiddle.net/JKirchartz/LChKh/

在大多数浏览器中，点击Ctrl+u将允许您查看来源，从那里您可以看到投资组合和关于我的页面都已存在，他只是在页面之间制作动画并隐藏其中一些基于图。

JS很难获得基本效果：

$(".pager").click(function(){
  $this = $(this);
  // this hides the current div by sliding it up
  $this.parent().slideUp();  
  // this line removes the btn from the link's ID to get the target div's ID
  // then it shows the target div by sliding it down
  $("#"+$this.attr("id").substring(0,5)).slideDown();
});

，标记就是这个

<div id="site">
<div id="page1">
    <h1>Page 1</h1>
    <p>In quis nibh metus...</p>
    <a href="#" id="page2btn" class="pager bottom">Page 2</a>
</div>
<div id="page2">
    <a href="#" id="page1btn" class="pager top">Page 1</a>
    <h1>Page 2</h1>
    <p>In quis justo velit, quis sagittis diam...</p>
    <a href="#" id="page3btn" class="pager bottom">Page 3</a>
</div>
<div id="page3">
    <a href="#" id="page2btn" class="pager top">Page 2</a>
    <h1>Page 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>

CSS的基础是

#page1, #page2, #page 3, #site {height:100%;width:100%}
#page1, #page3 {display:none}

有extra slide effects in jQueryUI，您可以

$(".pager").click(function(){
  $this = $(this);
  $this.parent().hide("slide", { direction: "left" }, 1000);  
  $("#"+$this.attr("id").substring(0,5)).show("slide", { direction: "left" }, 1000);
});

但你必须调整CSS

关于页面间滑动的线索效果

1 个答案: