Question

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

Answer 1

LIVE DEMO

非常简单，假设您有一个底部导航和一个#pages DIV，它将为第一个孩子提供所需的DIV页：

<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和height 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') );
    });

});

请注意导航锚点与相对页面ID具有相同的锚名称。 现在解释：

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

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

这样做可以确保如果我将页面链接粘贴到朋友，例如：

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

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

在函数内部，我们确保始终将主页保持在0左侧像素，只需使用jQuery :gt()选择器（大于索引）定位所有其他页面：

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

比我们只需定位所需的网页ID，我们就会对其进行动画处理。

我们是否通过了点击的锚href属性
加载的页面在地址栏中是否已有hash。

使用jQuery另一种方法就是

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

但是在我们的函数内部，我们应该等待HASH更改才能应用任何动画。为此目的，setTimeout would be fine:

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

Answer 2

您实际上可以将页面设置为部分并尝试对click事件进行转换。这将非常有帮助。 This will help You

Answer 3

如果您对jQuery有点熟悉，最终可以使用slide效果从jQuery UI中使用.show()函数。

或者，你只能用HTML / CSS制作它，网上有很多教程，比如this one，但div的宽度和高度都是100％。

网站中的页面滑块

3 个答案: