Масштабирование элементов Вверх с помощью Scriptaculous - PullRequest
Новая
       28

Масштабирование элементов Вверх с помощью Scriptaculous

0 голосов
/ 04 марта 2010

Я создаю небольшой пункт меню, используя Prototype / 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
        })
    });
}

}) * * тысячу двадцать-пять

Спасибо! Рич

1 Ответ

1 голос
/ 04 марта 2010

У меня всегда был больший успех с Effect.Morph, чем Effect.Scale. Это дает вам более тонкий контроль.

...