首页>>Jquery图片>>整个页面滚动显示不同的内容(2013-11-25)

整个页面滚动显示不同的内容

 本例用到的js和css请到演示页面查看

整个页面滚动显示不同的内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2.   $(document).ready(function(){  
  3.      $(".main").onepage_scroll({  
  4.        sectionContainer: "section",  
  5.        responsiveFallback: 600  
  6.      });  
  7.     });  
  8.       
  9. </script>  

 

XML/HTML Code
  1. <div class="wrapper">  
  2.       <div class="main">  
  3.           
  4.       <section class="page1">  
  5.         <div class="page_container">  
  6.           <h1>整个页面滚动显示不同的内容</h1>  
  7.             
  8.             
  9.       
  10.         </div>  
  11.         <img src="phones.png" alt="phones">  
  12.       </section>  
  13.           
  14.         <section class="page2">  
  15.           <div class="page_container">  
  16.           <h1>Ready-to-use plugin</h1>  
  17.           <h2>All you need is an HTML markup, call the script and BAM!</h2>  
  18.           <code class="html">  
  19.             <div class="main"><br>  
  20.               <section>...</section><br>  
  21.               <section>...</section><br>  
  22.               ...<br>  
  23.             </div>  
  24.           </code>  
  25.           <code class="js">  
  26.               $(".main").onepage_scroll();  
  27.             </code>  
  28.           </div>  
  29.       </section>  
  30.           
  31.         <section class="page3">  
  32.           <div class="page_container">  
  33.           <h1>本站有各种jquery效果</h1>  
  34.   
  35.         </div>  
  36.       </section>  
  37.     </div>  
  38. </div>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_131.html