На сайте mega-quatro.3dn.ru вы найдёте: Скачать, Бесплатно, Программа, Игра, game, mp3, Шаблон, javascript, Скрипт, Для ucoz, microsoft Клип Смотреть video Видео Скрипты для ucoz Шаблоны сайтов для ucoz Кино Онлайн portable а также Тема и фотошоп

У нас так же имееться: CS, Counter strike, Photoshop, Кисти, Фото, Урок, Музыка, Ucoz, Форум, Шаблоны для ucoz, Скрипты для ucoz, Скрипты для юкоз, юкоз,
Пусто
20.09.2018
 
| Главная | Форум | Поиск | Фотоальбом | FAQ | Радио | Ваша ссылка | Регистрация |
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
BAZA-Softa™ | БАЗА-Софта™ Форум » Скрипты для uCoz » Другие скрипты для uCoz » Красивая выезжающая панель для uCoz
Красивая выезжающая панель для uCoz
_Vadim_Дата: Понедельник, 23.08.2010, 23:09 | Сообщение # 1
Админчег =))
Сообщений: 393
[ 7 ]
Красивая выезжающая панель для uCoz

Пример

Выезжает при наводке мышью.
Полностью кроссбраузерная.
На чистом 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$
         

            Кстати, на чистом JS, без jQuery <img rel="usm" src="http://megasoft.3dn.ru/emoticons/Sypsena.gif" border="0" align="absmiddle" alt=":)">
         

            Хотя кого это волнует.
        </span>
       </div>

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

По просьбам сделал панель выезжащей сбоку:

Пример

HTML

Code
  <div id="x" style="width: 300px; height: 50%; border-right: 5px dashed #eee; background: #555; position: absolute; margin-left: -300px; margin-top: 100px;">
      <span style="color: white; font-weight: bold;">
          Slide Panel by $USERNAME$
       

          Кстати, на чистом JS, без jQuery <img rel="usm" src="http://megasoft.3dn.ru/emoticons/Sypsena.gif" border="0" align="absmiddle" alt=":)">
       

          Хотя кого это волнует.
      </span>
     </div>

JavaScript

Code
  <script type="text/javascript">
     function slide(obj, direction, a) {
      clearInterval(window.z);
      counter = 0;
      z = setInterval(function () {
       if (a ? parseInt(obj.style.marginLeft) < 0 : parseInt(obj.style.marginLeft) > -300) {
        obj.style.marginLeft = parseInt(obj.style.marginLeft) + 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>
BAZA-Softa™ | БАЗА-Софта™ Форум » Скрипты для uCoz » Другие скрипты для uCoz » Красивая выезжающая панель для uCoz
  • Страница 1 из 1
  • 1
Поиск:

Статистика

Рейтинг@Mail.ru PR-CY.ru





Все материалы размещенные на сайте пренадлежат их владельцам и предоставляются исключительно в ознакомительных целях.
Администрация ответственности за содержание материала не несет и убытки не возмещает.
По истечении 24 часов материал должен быть удален с вашего компьютера.
Незаконная реализация карается законами РФ и Украины: "Об авторском и смежном праве".
При копировании материала, ссылка на сайт
обязательна!(правообладателям)