Question

我有一些webpage，它有一个很好的单页面实现，我想复制。

我希望能够使用网页等菜单链接切换内容框（和背景图片）。有没有现成的jQuery插件？

Answer 1

这可以通过十几个轮播JQuery插件中的任何一个来实现，也可以实现Jquery Mobile并获得相同的效果。

JQM的好处可能是您的页面现在也可以移动就绪。

修改

我通常不喜欢发布链接，但在这种情况下，我认为这个问题对于简明的答案来说有点宽泛，所以这里有一些插件可以为你完成这个工作。

http://www.designrazzi.com/2013/jquery-slider-plugins/

Answer 2

尝试scrolldeck.js http://johnpolacek.github.io/scrolldeck.js/

或Fathom.js http://markdalgleish.com/projects/fathom/

Answer 3

<!DOCTYPE html>  
<html>      
    <head>      
       <title>Sample Page</title>           
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-   1.0.min.css" />    
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">    </script>        
       <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head>   
<body>              
    <div data-role="page" id="page1">      
        <div data-role="header">         
            <h1>
                Page 1
            </h1>     
        </div><!-- /header -->      

        <div data-role="content">
            <a id="changePageButton" data-role="button">Change Page!</a>
        </div><!-- /content -->      

        <div data-role="footer">              
        </div> 
    </div><!-- /page -->      

    <div data-role="page" id="page2">         
        <div data-role="header">    
           <h1>
              Page 2
            </h1>     
        </div><!-- /header -->         

        <div data-role="content">  
            <p>Hooray for page 2!</p>
        </div><!-- /content -->         

        <div data-role="footer">         
        </div><!-- /fotoer -->     

    </div><!-- /page --> 

</body>

$(function() {
    $("#changePageButton").click(function() {
        $.mobile.changePage("#page2");
    });        
});

使用滑动页面效果创建单页网站

3 个答案: