Question

我已经创立了这个 - ＆gt; http://www.building58.com/examples/tabSlideOut.html

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

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

也许有人已经解决了我的问题？

谢谢你的帮助！

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。

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

我需要找到基于prototype.js的滑出标签吗？

1 个答案: