[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
PowerSoft Media Portal - Форум » Веб-мастеру » Скрипты uCoz » Выезжающая панель
Выезжающая панель
TwisterДата: Четверг, 08.07.2010, 10:35 | Сообщение # 1
SySop
Группа: Пользователь
Сообщений: 106
Награды: 8
Репутация: 34
Выезжает при наводке мышью.
Полностью кроссбраузерная.
На чистом JavaScript, никакого jQuery.

Пример

Установка:

1. Установим скрипт, который будет реализовывать плавание панели:

Code
  <script type="text/javascript">
       function slide(obj, direction, a) {
        clearInterval(window.z);
        counter = 0;
        z = setInterval(function () {
         if (a ? parseInt(obj.style.marginTop) < 0 : parseInt(obj.style.marginTop) > -300) {
          obj.style.marginTop = parseInt(obj.style.marginTop) + direction;
          counter++;
         } else {
          clearInterval(z);
         }
        },
        10);
       }
       var pad = document.getElementById('x');
       pad.onmouseover = function () {
        slide(this, 3, true);
       }
       pad.onmouseout = function () {
        slide(this, -3, false);
       }
       </script>

2. Установим саму панель:

Code
  <div id="x" style="width: 100%; height: 300px; border-bottom: 5px dashed #eee; background: #555; position: absolute; margin-top: -300px;">
        <span style="color: white; font-weight: bold;">
            Slide Panel by $USERNAME$
         <br />
            Кстати, на чистом JS, без jQuery <img rel="usm" src="http://megasoft.3dn.ru/emoticons/Sypsena.gif" border="0" align="absmiddle" alt=":)">
         <br />
            Хотя кого это волнует.
        </span>
       </div>

Внутри неё можно поставить форму входа, регистрации, мини-профиль, информер — в-общем, всё что захотите.

Автор: $USERNAME$


PowerSoft Media Portal - Форум » Веб-мастеру » Скрипты uCoz » Выезжающая панель
  • Страница 1 из 1
  • 1
Поиск: