jqueryを使った完全なWebページ

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種類のイージングタイプの中から選択することができます。