javascript - 我需要找到基于prototype.js的滑出选项卡吗？

我已经建立了这个-> http://www.building58.com/examples/tabSlideOut.html

但是出于某些原因，我不想使用它：


我需要原型框架而不是jquery
我需要一个图像来打开滑块（单击以打开），当它打开时图像将变为“单击以关闭”


也许有人已经对我的问题有相同的解决方案？

谢谢您的帮助！

最佳答案

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。

对于较旧的浏览器，它会正常降级，无法播放动画，但抽屉仍显示在正确的位置。

关于javascript - 我需要找到基于prototype.js的滑出选项卡吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7257613/