На главную Форум сайта Вы Гость + Регистрация / Вход
Выезжающая панель - Форум чат общение
ПОПУЛЯРНЫЕ ТЕМЫ
[Игра] 15 +
Оставлено 179 сообщений в теме
досчитай до 100
Оставлено 99 сообщений в теме
Как разыграть друга в в...
Оставлено 72 сообщений в теме
Сигны в формате psd
Оставлено 70 сообщений в теме
[Игра] Города
Оставлено 69 сообщений в теме
[Игра] Поставить + выше...
Оставлено 44 сообщений в теме
Раздача WMB
Оставлено 41 сообщений в теме
 

  • Страница 1 из 1
  • 1
Форум чат общение » Центр помощи по развитию web ресурсов » Скрипты для ucoz » Выезжающая панель
Выезжающая панель
Support@NC
Дата: Среда, 06.04.2011, 19:45 | Сообщение # 1
Создатель топика
NN-CS.3DN.Ru Агент
Администратор
Сообщений: 0
Репутация: 54
Награды: 8
[RU]
Смотреть пример

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

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


Служба поддержки NN-CS.3DN.Ru Агент
Форум чат общение » Центр помощи по развитию web ресурсов » Скрипты для ucoz » Выезжающая панель
  • Страница 1 из 1
  • 1
Поиск:

Как писать сообщения и создавать свои темы на форуме?

Вверх