0

我正在尝试在现有的 html 页面上制作内容滑块。基本上，当用户单击导航链接时，内容将“滑出”当前页面并“滑入”相应页面。

我过去使用过滑块，但没有绑定到已经存在的导航栏。

有什么建议吗？

我的html结构是这样的：

<div id="wrapper">
  <ul class="nav">
    <li class="navlink">item</li>
    <li class="navlink">item</li>
    <li class="navlink">item</li>
    <li class="navlink">item</li>
  </ul>
  <div class="content">
     content
  </div>
</div>

有什么建议吗？

4

2 回答 2

2

你的意思是“页面转换”吗？有很多不同的方法可以做到这一点，包括这个以前的 SO 帖子，或者这个 fading one。

于 2012-11-20T18:02:33.780 回答
2

你可以看看这个，做了一个非常简单的脚本。

工作示例：http: //jsfiddle.net/9rde7/6/

HTML：

<div id="wrapper">
  <ul class="nav">
    <li class="navlink" page="page1">item</li>
    <li class="navlink" page="page2">item</li>
    <li class="navlink" page="page3">item</li>
  </ul>
  <div class="content">
     <div class="content-page active" id="page1">Content 1</div>
     <div class="content-page" id="page2" style="background:#666">Content 2</div>
     <div class="content-page" id="page3">Content 3</div>
  </div>
</div>​​​​​​

CSS：

.content{
    background:#efefef;
    position:relative;
    width:99%;
    height:500px;
    margin:0 auto;
    overflow:hidden;
}

.content-page{
    background:#dddddd;
    position:absolute;
    width:100%;
    height:100%;
    left:100%;
}

.content-page.active{
    left:0;
}

Javascript：

$('.nav li').bind('click', function(){
    $page = $('#'+$(this).attr("page"));
    if($page.hasClass("active")) return;

    $('.content-page.active').animate({left:"100%"},200);
    $('.content-page').removeClass("active");
    $page.animate({left:"0"},200, function(){$page.addClass("active");});
});
于 2012-11-20T18:28:13.403 回答