dle.in.ua » Хаки » Анимированные теги на mootools

Анимированные теги на mootools

Автор: Kursor от 20-01-2010, 22:57
Анимированные теги на mootools
-Наши теги будут на mootools
-Всё предельно просто и без использования css.Только JS.
Качаем фреймворк: _http://mootools.net/download/get/mootools-1.2.4-core-yc.js

Кидаем в папку с шабом и подключаем его:
<script type="text/javascript" src="{THEME}/mt.js"></script>

Качаем скрипт с нашего сайта http://new-dle.biz/templates/Default/js/mt-slide.js так же подключаем.
Дописываем в css след. стиль: (не обязательно,но в нем можно будет оформлять ссылки как нужно
#links-block p {
    border: 3px solid #CCC;
    background: #EBEBEB;
    padding: .5em .7em;
    width: 30em;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.4em;
}

Теперь ищем {tags} и заменяем на :
<div id="links-block">{tags}</div>
<script type="text/javascript">
window.addEvent('domready', function() {
    var duration = 350;  //Время перехода
    

    $each($$('#links-block a'), function(item) {
    
        item.addEvent('mouseover', function(e) {
            e.stop();
            var colorFx = new Fx.Morph(this, { 'duration': duration });
            colorFx.start({
                'color': '#FFF',
                'background-color': '#33CCFF'
            });
        });
        
        
        item.addEvent('mouseout', function(e) {
            e.stop();
            var colorFx = new Fx.Morph(this, { 'duration': duration });
            colorFx.start({
                'color': '#C0C0C0',
                'background-color': '#EBEBEB'
            });
        });
    });
});
</script>


Готово. Время перехода ставим 600-800, так будет лучше.Если на странице подключен jquery,то теги работать не будут. Скоро обновлю.
P.S. Демо new-dle.biz все страницы кроме главной.
  • Группа: User
  • Icq: --
  • Комментариев: 16
  • Публикаций: 1
  • Hmm... It looks cool, but doesn't work for me...

    --------------------
    • Gazuots
    • Регистрация: 16.10.2009
    • Репутация: (0|0|0)
    • 20 января 2010 23:24
    • 1
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 1
  • Публикаций: 0
  • будьте внимательны к работам Kursor. http://www.dle.in.ua/forum/topic_8448
    • zaza
    • Регистрация: 5.01.2011
    • Репутация: (0|0|0)
    • 6 января 2011 17:32
    • 2
    ^
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.