從右側滑動面板

我試圖在投影組合部分中複製該網站上的效果，在該部分中滑動完整大小的視口中的面板，然後在您單擊關閉時將其滑出。從右側滑動面板

實施例這裏：http://alwayscreative.net/#portfolio

這是我的當前標記：

<section class="panel" id="portfolio"> 
    <section class="content"> 
     <h1>What are you <strong>interested</strong> in?</h1> 
     <a class="btn-portfolio" id="btn-commercial" href="#">Commercial</a> 
     <a class="btn-portfolio" id="btn-residential" href="#">Residential</a> 
    </section> 
</section>

的.panel部爲100％的高度和視口的寬度，我想2個不同的面板，以便能夠滑動一個用於＃btn-commercial，另一個用於＃btn-residential。

任何想法如何使這發生？

如果有幫助的任何，這裏是到目前爲止我的網站：http://www.freshbrand.ca/testlink/top40/#portfolio

來源

2013-05-17 Kevin Haag

這裏是你將如何使用jQuery但顯然這樣做如果你願意，你可以用普通的javascript來完成。設置面板，在你的CSS絕對位置：

.panel { 
    position: absolute; 
    top: 0; 
    height: 100%; 
    border-width: 0; 
    margin: 0; 
} 
.panel inactive{ 
    display: none; 
} 
.panel active { 
    display: block; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

在JavaScript（DOM的加載後）得到屏幕的尺寸，並設置非活動元素的位置恰好在屏幕的右側邊緣：

$('.panel').css('width', screen.innerWidth); 

var setup = function() { 
    $('.portfolio-panel.inactive').css('left', window.innerWidth); 
    $('.portfolio-panel.active').css('left', 0); 
} 
setup();

當您希望面板從右側滑動，其ID傳遞到下面的函數：

var slideIn = function(panelId) { 
    $('#' + panelId).animate({ 
    left: 0 
    }, 400, function() { // animates the #left property from the screen width down to zero (i.e. slide it in from the right hand edge of the screen) 
    // tidy up 
    $('.portfolio-panel.active').removeClass('active').addClass('inactive'); 
    $('#'+panelId).removeClass('inactive').addClass('active'); 
    setup(); 
    }); 
};

編輯：事件處理會是這個樣子：

$('.btn-portfolio').click(function() { 
    slideIn($(this).attr('id').substr(4)); // extract the panel name from the id and pass it into slideIn 
});

剩下的唯一問題是消除水平滾動條，你會在動畫過程中可能看到。只需將overflow-x: hidden;添加到滾動條所屬的元素（可能是body，但這取決於您如何構建和設計網站的其餘部分）

來源

2013-05-17 20:02:41

這真是太棒了Rob！但是當我點擊某個元素時，如何讓最後一個函數運行？ –

我一直試圖讓這工作在一個JSFiddle，但我沒有任何運氣......這裏的小提琴：http://jsfiddle.net/xD6gh/ –

對不起凱文 - 我寫的代碼無需在瀏覽器中試用（總是出錯！）。有幾個錯別字。它現在已經修復，並且一個正在運行的jsFiddle在這裏：http://jsfiddle.net/xD6gh/1/ –

-1

這基本上是一個單頁網站，很多jQuery插件可用於相同。我個人比較喜歡

http://joelb.me/scrollpath/

退房它的演示，並從GitHub的鏈接下載代碼

https://github.com/JoelBesada/scrollpath

希望這有助於

來源

2013-05-17 18:13:23

這不是我真正想要的 - 我需要一個面板從100％寬度的視口右側滑入，然後在單擊按鈕時再次關閉 –

從右側滑動面板

回答

相關問題