使用Scriptaculous向上扩展元素

时间:2010-03-03 21:34:51

标签: javascript css events scriptaculous prototypejs

我正在使用Prototype / Scriptaculous构建一个小菜单项。

我设置的小测试在菜单项上使用Effect.Scale。当你将鼠标悬停在菜单项上时,我希望该项目向上扩展并用其推动另一个元素。

我将ul.nav设置为特定高度,但是缩放元素似乎绝对定位,因此将其从流中移除并向下缩小到框外。

有没有办法做到这一点,还是我错了? 这是页面: 删除, - 无效网址(http://krd/krd-design.net

CSS:

.menuitem {
border: 1px solid black;
width: 90px;

}

  .lift {
display: block;
background-color: gray;
width: 90px;
height: 1px;

}

 .nav {
border-bottom: 1px solid black;
height: 60px;

}

javascript:

$$('.menuitem').each(function(s){
if($(s).down(1).tagName == 'SPAN' && $(s).down(1).className == 'lift') {
    var lift = $(s).down(1);
    $(s).observe('mouseenter', function() {
        new Effect.Scale(lift, 120, {
            scaleX: false,
            scaleY: true,
            scaleContent: false,
            scaleMode: { originalHeight: 100 },
            scaleFrom: 1
        })
    });
}

})

谢谢! 富

1 个答案:

答案 0 :(得分:1)

我总是比Effect.Scale在Effect.Morph上取得更多成功。它为您提供了更好的控制。