幻燈片內容/頁面轉換

我試圖重新創建something like they've got over at gimmebar.com。幻燈片內容/頁面轉換

當您單擊圖像時，內容當前頁面向左滑出並淡出。目標頁面從右側淡入並滑入。

我已經嘗試了一些東西，比如在寬度爲200％的容器中創建兩個div，並滾動內容以查看和使用JqueryUI並滑動div。滾動失敗，div無法移動，srollLeft始終爲0，無論如何。幻燈片工作稍好，但對我來說，似乎他們不是同時運行。第二個div剛剛存在，而不是恰好在第一個後面滑動。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>slide demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
    <style> 
    .container { 
     width: 100%; 
     float: left; 
     height: 800px; 
    } 
    #one { 
     background-color: red; 
    } 
    #two { 
     background-color: #333; 
     display: none; 
    } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
</head> 
<body> 
    <div class="container" id="one"></div> 
    <div class="container" id="two"></div> 
<script> 
$(document).click(function() { 
      $("#one").hide("slide", { direction: "left" }, 1000); 
      $("#two").show("slide", { direction: "left" }, 1000); 
}); 
</script> 
</body> 
</html>

它似乎應該是如此容易實現，但我卡住了。

保重。

編輯：我有這樣的工作，你可以在this fiddle看到。幻燈片在那裏，但我看不到褪色。也可能有一個更好的方法來實現這一點，但我很滿意不需要加載第三個lib /插件來滑動div。

http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios 找到由他們的開發人員編寫的教程。認爲這將被視爲解決方案。

來源

2012-12-01 Oskar

我會建議你使用這個我不久前在網站上使用的jQuery腳本，它的工作方式就像一個叫CODA SLIDER的魅力，它是由Kevin Batdorf製作的，它的安裝只有5行代碼。

好運

來源

2012-12-01 03:17:00 Minnen

開發人員現在鏈接到名爲[液體滑塊]（http://liquidslider.com/）的後續項目。 –

純JavaScript的解決方案：在CSS：

div.wrap {visibility: hidden; position: absolute; overflow: hidden; 
    top: 0; left: 0; width: 100%; height: 100%} 
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}

在HTML

：

<div class="initContent"> 
    This is the content that is initially displayed 
</div> 
<div class="wrap"> 
    <div class="newContent"> 
     Put the content you want to be revealed here 
    </div> 
</div>

的newContent格最初是隱藏的，因爲它的左邊是在它的父（換行）div的右邊緣，CSS告訴瀏覽器隱藏任何溢出父div的內容。

然後以顯示隱藏的內容設定的計時器，逐漸減小所述style.left用於從100％的內格至0％，並增加不透明度，從0到1我由class for opening/closing swipey menus可能被稍微適應做到這一點。（編輯：a newer version）

來源

2012-12-01 17:09:28 Stuart

幻燈片內容/頁面轉換

回答

相關問題