我需要找到基於prototype.js的幻燈片選項卡？

Question

我已經創辦了這 - >http://www.building58.com/examples/tabSlideOut.html

但也有一些原因，我不想使用它：

1. 我需要原型框架，而不是jQuery的
2. 我需要要打開的圖像滑塊（點擊打開），當它打開圖像將更改爲「點擊關閉」

也許有人已經有我的問題相同的解決方案？

感謝您的幫助！

Answer 1

CSS轉換是爲了這樣的事情！有關您要查找的內容的示例，請參見http://jsfiddle.net/Fw7MQ/（「手柄」會更改背景顏色，但您可以輕鬆地將該背景圖像改爲此圖像）

CSS的關鍵部分是;

#drawer { 
    position: relative; 
    left: -200px; 
    /* transition is repeated for all supporting browsers */ 
    -webkit-transition: left 0.5s ease-in-out; 
    -moz-transition: left 0.5s ease-in-out; 
    -o-transition: left 0.5s ease-in-out; 
    -ms-transition: left 0.5s ease-in-out; 
    transition: left 0.5s ease-in-out; 
} 
#drawer.open { 
    left: 0; 
} 

'抽屜'有一個類名稱根據需要添加或刪除使用這個小javascript腳本;

Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open')) 

...但你可以免去甚至認爲，如果動畫是在鼠標懸停做，而不是 - CSS選擇器改變從#drawer.open到#drawer:hover。

對於較老的瀏覽器，它優雅地降級，動畫不播放，但抽屜仍然出現在正確的位置。