使用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縮放元素向上

回答

相關問題