基於CSS3的任何方向的傳送帶無論順序

我一直在試圖爲一組照片構建簡單的傳送帶效果。使用PrototypeJS使用效果庫很容易，但我在理解如何使用CSS3來實現這一點時遇到問題。基於CSS3的任何方向的傳送帶無論順序

我已經制定了一些解決方案，但他們只有在HTML中的照片順序也是您計劃導航的順序時纔有效。這裏情況不同。

不論照片的順序的：

爲了能夠使用基於CSS3規則（平移X /過渡等），以從視圖動畫移除活動圖像的
替換爲它任何其他圖像，如在下拉菜單中選擇
他們倆都在相同的方向，如由下拉菜單確定
它們都並排

例如：

第一張照片是 '活性' 和鑑於
我選擇「從左向右」格式他菜單
我選擇「「作爲照片編號
我點擊」轉「
作爲類的「照片」的第一DIV移動到右側，第3 DIV位於其左側（的類「相片」），並且也正在同步移動到右側

一些考慮：

@webkit優選的，但無論
佈局，位置等的CSS是故意不存在的，以便不妨礙任何溶液
我用PrototypeJS爲簡單起見，你也可以做到，或者沒有圖書館所有，但不的jQuery（對不起）

示例標記立足理念&建議圍繞

我想這裏有完整的HTML/CSS /示例頁面的JS，但在部分預覽過程中保持渲染，所以以防萬一它被鏈接在這裏：

http://www.gimee.org/question.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Question</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script> 
    <style> 
    #demo { 
    float: left; 
    width: 520px; 
    height: 100%; 
    overflow: hidden; 
    } 

    #container { 
    width: 3000px; 
    } 

    .photo { 
    float: left; 
    : 500px; 
    padding: 10px; 
    } 

    #controls { 
    float: left; 
    } 
</style> 
</head> 
<body> 
    <div id="demo"> 
    <div id="container"> 
     <div class="active photo"> 
     <img src="http://farm2.static.flickr.com/1161/4727417148_ed8d691aa3.jpg"> 
     </div> 
     <div class="photo"> 
     <img src="http://farm2.static.flickr.com/1013/4730980370_75cceea5be.jpg"> 
     </div> 
     <div class="photo"> 
     <img src="http://farm2.static.flickr.com/1401/4606449779_1bc79e6078.jpg"> 
     </div> 
     <div class="photo"> 
     <img src="http://farm5.static.flickr.com/4053/4690748949_db09007187.jpg"> 
     </div> 
    </div> 
    </div> 

    <div id="controls"> 
    <p>Direction:</p> 
    <select id="direction"> 
     <option value="right">from Left to Right</option> 
     <option value="left">from Right to Left</option> 
    </select> 
    <p>Photo Number:</p> 
    <select id="photoNumber"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
    </select> 
    <p><a href="#" id="go">Go</a></p> 
    </div> 

    <script> 
    var Demo = { 
     run: function() { 
     console.log('Init'); 
     Event.observe('go', 'click', this.go.bind(this)); 

     }, 
     go: function(e) { 
     var direction = $('direction').value; 
     var photoNum = $('photoNumber').value - 1; 

     console.log('direction:', direction, 'photoNum:', photoNum); 

     var container = $('container'); 
     var photoCurrent = container.select('.active')[0]; 
     var photoNext = container.select('.photo')[photoNum]; 

     if (photoCurrent != photoNext) { 

     if (direction=="right") { 
      /* 
      Move the two photos, appearing side-by-side, from Left to Right 
      so that the 'Next' photo appears to push the 'Current' photo out 
      */ 
      console.log('from Left to Right'); 

     } else { 
     /* 
      Move the two photos, appearing side-by-side, from Right to Left 
      so that the 'Next' photo appears to push the 'Current' photo out 
     */ 
     console.log('from Right to Left'); 

     } 
     } else { 
     console.log("Do nothing since you're asking for the currently active photo"); 
     } 
    } 
    }; 
    Demo.run(); 
    </script> 
</body> 
</html>

來源

2010-06-27 donohoe

恥辱沒有jQuery - 對於閱讀此內容的任何人來說，JQuery UI Tools可以在大約20秒內完成此操作。 http://flowplayer.org/tools/demos/scrollable/index.html – aronchick 2010-06-27 03:22:56

沒有jQuery的原因主要是因爲（a）我不想依賴庫，但可以使用PrototypeJS（如果必須的話）（b）我真的很想了解解決方案，而不是將其隱藏在庫中 – donohoe 2010-06-27 14:25:58

好吧，看起來像我找到了答案我自己。我們的想法是每次移動照片時重置位置，這樣當您再次遇到照片時您可以不可知，並在CSS3動畫之前將其移至基於左側或右側的起始點。

它重置了我遇到問題的位置，但是現在我可以使用基於CSS3動畫的關鍵幀來克服它。

/* 
    NEXT PAGE 
    Move INTO View from the Right side 
*/ 
@-webkit-keyframes inFromRightAnim { 
0% { 
    -webkit-transform: translateX(0%); 
} 
100% { 
    -webkit-transform: translateX(-100%); 
} 
} 

.inFromRight { 
-webkit-animation-name:   inFromRightAnim; 
-webkit-animation-duration:  0.5s; 
-webkit-animation-timing-function: linear; 
-webkit-transform:     translateX(-100%); 
}

我仍然得到一些funkiness的順序通過我週期，但相對於照片的位置是的有關我的bug的代碼。

來源

2010-07-05 19:46:20 donohoe

-1

什麼是僅靠CSS3解決方案？沒有Javascripts？

這個頁面有一個使用CSS的圖像滑塊集合，也許可以幫助你。

http://speckyboy.com/2010/06/09/10-pure-css3-image-galleries-and-sliders/

來源

2010-07-01 20:23:48

我有一個精確定義的問題，我在一個特定的示例中構建。我知道你的意思不錯，但建議像這樣的鏈接不僅沒有幫助，而且令人沮喪。 – donohoe 2010-07-02 14:28:23

基於CSS3的任何方向的傳送帶無論順序

回答

相關問題