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

Question

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

但有一些原因我不想使用它:

1. 我需要原型(prototype)框架而不是 jquery
2. 我需要一个图像来打开 slider (点击打开)，当它打开时图像将更改为“点击关闭”

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

感谢您的帮助!

Answer 1

CSS 转换就是为这种事情而做的!有关您正在寻找的内容的演示，请参阅 http://jsfiddle.net/Fw7MQ/ (“ handle ”会更改背景颜色，但您可以轻松地将其设为背景图像)

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 .

对于较旧的浏览器，它会正常降级，动画不会播放，但抽屉仍然出现在正确的位置。