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

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

 

演示

 

 

JavaScript Code

$(document).ready(function(){
  $('body').fixedScroll({
    // or provide a list of background images or colors
    'backgrounds': [
        'images/CherryBlossom.JPG',
        'images/LasVegas.JPG',
        'images/SanFrancisco.JPG',
        'images/SanJuanIsland.JPG',
        'skyblue'
    ],
    // also specify the number of sections manually with 'numSections'
    // 'numSections': 5,
    // use 'sectionContent' to override what shows up in each section by default
    'sectionContent': '' +
        '<div class="contentwrap">' +
          '<div class="content">' +
            '<header>' +
              '<h2>freejs.net</h2>' +
            '</header>' +
            '<p><a href=article_jquerytupiantexiao_271.html>高大上的背景切换' +
            '全屏背景切换 </a>' +
            '</p>' +
          '</div>' +
        '</div>'
  });
  // move the display content into the first section
  $('#section0 .content').empty()
  $('#mainContent').appendTo('#section0 .content');
});

 

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