幻燈片的div回來後退按鈕

HTML：

<div id="container"> 

<div id="box1" class="box">Div #1</div> 
<div id="box2" class="box">Div #2</div> 
<div id="box3" class="box">Div #3</div> 
<div id="box4" class="box">Div #4</div> 


    </div>

CSS：

body { 
     padding: 0px;  
    } 

    #container { 
    position: absolute; 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    } 

    .box { 
    position: absolute; 
    width: 50%; 
    height: 300px; 
    line-height: 300px; 
    font-size: 50px; 
    text-align: center; 
    border: 2px solid black; 
    left: 150%; 
    top: 100px; 
    margin-left: -25%; 
    } 

    #box1 { 
    left: 50%;

JS：

$('.box').click(function() { 

$(this).animate({ 
    left: '-50%' 
}, 500, function() { 
    $(this).css('left', '150%'); 
    $(this).appendTo('#container'); 
}); 

$(this).next().animate({ 
    left: '50%' 
}, 500); 
});

這裏有jsfiddle：http://jsfiddle.net/jtbowden/ykbgT/2/

我希望能夠使用瀏覽器的上一個按鈕返回到上一個div。

有沒有辦法做到這一點？

編輯：

我只需添加錨嘗試過，但似乎並沒有工作。

來源

2012-12-20 Marcolac

要做到這一點的一種方法是將'#DivId'附加到您的URL，所以當您轉到此URL時，頁面將專注於此div。像這樣： http://stackoverflow.com/questions/13977714/add-anchor-to-sliding-divs#question –

@MehdiKaramosly我試過了。每次滑動時，我都會添加一個#DivId。但是當我按下後退按鈕時，div不會回退。 – Marcolac

這就是我的意思：http://jsfiddle.net/ykbgT/4525/你可以添加一些修改，將div移動到中間位置，如果在按下後退按鈕後頁面不在中間。 –

我會用這樣的hashchange插件http://benalman.com/projects/jquery-hashchange-plugin/

有上hashchange執行的函數，其滑動相應的框進入視野

當你使用瀏覽器的前進和後退按鈕，它會改變哈希和你的代碼將運行。

$(window).hashchange(function() { 
    var hash = location.hash; 
    slideBox(hash.substr(1)); 
});

來源

2012-12-20 17:55:16

謝謝你的幫助。它看起來可以在我的情況下工作，但我不知道如何將它應用於我的代碼。我試過了，我沒有找到如何做到這一點。你能否告訴我如何將這種情況應用於我的情況？ – Marcolac

幻燈片的div回來後退按鈕

回答

相關問題