javascript - 网站中的页面 slider

Question

我是网络编程新手。我想构建类似 flip.hr 的东西.让我感兴趣的是当我们点击页面底部的导航栏时产生的滑动效果。 我目前知道的是 this ，您可以在其中创建指向页面不同部分的超链接，并在单击它们时将您带到特定部分。现在我想像完成的那样创建滑动效果here .请指导我实现这一目标。

Answer 1

LIVE DEMO

非常简单， 假设您有一个底部导航和一个 #pages DIV，它会将所需的 DIV 页面作为第一个 child :

<div id="pages">  
  <div id="home">HOME PAGE</div>
  <div id="about">ABOUT PAGE</div>
  <div id="products">PRODUCTS PAGE</div>
  <div id="contact">CONTACT</div> 
</div>

<table id="nav">
  <tr>
    <td><a href="#home">HOME</a></td>
    <td><a href="#about">ABOUT</a></td>
    <td><a href="#products">PRODUCTS</a></td>
    <td><a href="#contact">CONTACT</a></td>
  </tr>
</table>

所有你需要的是 position:fixed 底部的 #nav 并将 absolute 设置为 width和 高度 100% 你的页面:

#pages > div{
  position:absolute;
  width:100%;
  height:100%;
}
#pages div + div{ // To keep "HOME page" at 0 but push away all other pages
    left:-100%; /* note this */
}

// Style buttons and pages
#home,    a[href="#home"]    {background:#078;}
#about,   a[href="#about"]   {background:#780;}
#products,a[href="#products"]{background:#807;}
#contact, a[href="#contact"] {background:#088;}

#nav{
  position:fixed;
  bottom:0;
  width:100%;
  table-layout:fixed;
}
#nav a{
  display:block;
}

您只需要这一小块 jQuery:

jQuery(function($){

    function showPage( pageID ){
      var pID = pageID || window.location.hash;
      $('#pages > div:gt(0)').animate({left: '-100%'}, 600);
      $(pID).stop().animate({left:0}, 600);
    }
    showPage();

    $('#nav a').click(function(){
      showPage( $(this).attr('href') );
    });

});

请注意导航 anchor 如何与相关页面 ID 具有相同的 anchor 名称。 现在解释一下:

$('#nav a').click(function(){

默认情况下会在 URL 栏中设置一个 #pagename 哈希，现在我们所需要的只是一个函数，它会通过传递的参数 pageID 或读取目标页面 ID (||) 如果没有参数，请从地址栏读取 window.location.hash。

这样做可以确保如果我 cpoy 将页面链接粘贴给 friend ，例如:

http://www.example.com/#contact

showPage(); 函数触发器会将他带到所需的页面。

在函数内部，我们通过使用 jQuery :gt() 选择器(大于索引)简单地定位所有其他页面，确保始终将主页保持在 0 左边像素):

$('#pages > div:gt(0)').animate({left: '-100%'}, 600); // speaks by itself

比起我们简单地定位所需的页面 ID 并在适当的位置制作动画。

• 我们是否传递了被点击的 anchor href 属性，
• 加载的页面是否已经在地址栏中有一个哈希。

---

使用 jQuery 的另一种方法也很简单

$('#nav a').click(showPage);

但在我们的函数内部，我们应该等待 HASH 更改，然后才能应用任何动画。为此，setTimeout 就可以了:

function showPage(){
  setTimeout(function(){
    $('#pages > div:gt(0)').animate({left: '-100%'}, 600);
    $(window.location.hash).stop().animate({left:0}, 600);
  },100);
}
showPage();