使用Scriptaculous缩放元素向上

我正在使用Prototype/Scriptaculous构建一个小菜单项。使用Scriptaculous缩放元素向上

我设置的小测试在菜单项上使用了Effect.Scale。当您将鼠标悬停在菜单项上时，我希望该项目向上扩展并将其他元素一起向上推。

我将ul.nav设置为特定高度，但缩放元素似乎完全定位，因此将其从流中移除并向外缩放。

有没有办法做到这一点，或者我是否正在讨论这个错误？这里是页： 删除（无用）URL（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 
     }) 
    }); 
}

}）

谢谢！ Rich

来源

2010-03-03 Richard Testani

您发布的网址不起作用。请编辑或发表评论。 – 2010-03-03 21:48:00

我一直比Effect.Scale有更多的Effect.Morph成功。它给你更好的控制。

来源

2010-03-03 21:44:40

当我使用Effect.Scale时，看着Effect.Morph帮助我弄清楚如何设置我需要的东西。将nav设置为相对位置，将li设置为绝对值是绝招。 – 2010-03-03 22:08:41

使用Scriptaculous缩放元素向上

回答

相关问题