1. 首页
  2. 问答
  3. 创建带滑动页面效果的单页面网站

创建带滑动页面效果的单页面网站

2013-10-01 87 views
0

我有一些整个webpage，有一个伟大的单页实现，我想复制。创建带滑动页面效果的单页面网站

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

来源

2013-10-01 Imran

+0

所以我估计他们已经使用[jQuery的周期插件]（HTTP：// JQ uery.malsup.com/cycle/）尽管我发现很难将它与div盒而不是图像集成。 – Imran

回答

0

这可以用十几个轮播JQuery插件中的任何一个来完成，或者你可以实现Jquery Mobile并获得相同的效果。

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

编辑

我通常不张贴链接的粉丝，但在这种情况下，我认为这个问题是一个简洁的回答所以这里稍微宽泛一些插件，可以做这项工作的一个环节为你。

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

来源

2013-10-01 00:12:48 griegs

0 
<!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"); 
    });   
});

来源

2013-10-01 09:14:11 Ved

相关问题

 相关问题