完整的Web頁面緩和與jquery

Question

我一直在試圖瞭解如何實現一個完整的頁面緩解......你如何調用或告訴腳本我想要緩解到頁面的順序標籤？我需要使用身體負荷功能嗎？

非常感謝。

埃裏克

Answer 1

這裏是一個教程淡入淡出當您更改網頁：如果你想在網頁「反彈」，並出http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

，你可以設置你的網站包含在同一頁面上的div標籤，並簡單地「放鬆」他們進出幻燈片。

CSS -

.panel{ 
    float: left; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    display: inline-block; 
} 

HTML -

<div id='div1' class='panel'>Page 1</div> 
<div id='div2' class='panel'>Page 2</div> 
<div id='div3' class='panel'>Page 3</div> 
<div id='div4' class='panel'>Page 4</div> 
<div id='div5' class='panel'>Page 5</div> 

的JavaScript -

 
$(document).ready(function() { 
    var left = 0; 
    var width = $(window).width(); 
    var easing_type = 'easeOutBack'; 

    $(window).resize(function() { 
     initialize_all(); 
    }); 

    initialize_all(); 

    function initialize_all() { 
     left = 0; 
     width = $(window).width(); 
     $("#div1").css({ 
      left: 0 + "px" 
     }); 
     $("#div2").css({ 
      left: width + "px" 
     }); 
     $("#div3").css({ 
      left: 2 * width + "px" 
     }); 
     $("#div4").css({ 
      left: 3 * width + "px" 
     }); 
     $("#div5").css({ 
      left: 4 * width + "px" 
     }); 
    } 

    function move_forward() { 
     left -= width; 
     if (left 0) { 
      left = -4 * width; 
     } 
     $("#div1").animate({ 
      left: left + "px" 
     }, transition_time, easing_type); 
     $("#div2").animate({ 
      left: left + width + "px" 
     }, transition_time, easing_type); 
     $("#div3").animate({ 
      left: left +2 * width + "px" 
     }, transition_time, easing_type); 
     $("#div4").animate({ 
      left: left +3 * width + "px" 
     }, transition_time, easing_type); 
     $("#div5").animate({ 
      left: left +4 * width + "px" 
     }, transition_time, easing_type); 
    } 
}); 

這是在我嘗試了幻燈片一個簡單的嘗試，您需要包括jQuery緩動插件，但你可以選擇30種不同的緩動類型。