高大上的全屏背景切换效果

高大上的全屏背景切换效果

 

演示

 

 

JavaScript Code

1. $(document).ready(function(){  
2.   $('body').fixedScroll({  
3.     // or provide a list of background images or colors  
4.     'backgrounds': [  
5.         'images/CherryBlossom.JPG',  
6.         'images/LasVegas.JPG',  
7.         'images/SanFrancisco.JPG',  
8.         'images/SanJuanIsland.JPG',  
9.         'skyblue'  
10.     ],  
11.     // also specify the number of sections manually with 'numSections'  
12.     // 'numSections': 5,  
13.     // use 'sectionContent' to override what shows up in each section by default  
14.     'sectionContent': '' +  
15.         '<div class="contentwrap">' +  
16.           '<div class="content">' +  
17.             '<header>' +  
18.               '<h2>freejs.net</h2>' +  
19.             '</header>' +  
20.             '<p><a href=article_jquerytupiantexiao_271.html>高大上的背景切换' +  
21.             '全屏背景切换 </a>' +  
22.             '</p>' +  
23.           '</div>' +  
24.         '</div>'  
25.   });  
26.   // move the display content into the first section  
27.   $('#section0 .content').empty()  
28.   $('#mainContent').appendTo('#section0 .content');  
29. });  

 

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