Выезжающая панель от $USERNAME$ - Форум общения - Logical-portal

Время:

Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.118.255.51

Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.

Страница 1 из 1
1

Выезжающая панель от $USERNAME$

DooМ	Сообщение оставлено 04.08.2010 в 14:33:46 \| Сообщение #1

328

Посмотреть пример
Выезжает при наводке мышью.
Полностью кроссбраузерная.
На чистом JavaScript, никакого jQuery.

Установка:

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

Code

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>

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

Панель выезжащей сбоку:
Посмотреть пример
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$
       <br />
          Кстати, на чистом JS, без jQuery <img rel="usm" src="http://megasoft.3dn.ru/emoticons/Sypsena.gif" border="0" align="absmiddle" alt=":)">
       <br />
          Хотя кого это волнует.
      </span>
     </div>

JavaScript:

Code

Скрипт делал $USERNAME$

DooМ	Сообщение оставлено 04.08.2010 в 14:33:46 \| Сообщение #1
Пользователь Сообщения: 123 328	Посмотреть пример Выезжает при наводке мышью. Полностью кроссбраузерная. На чистом 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> Внутри неё можно поставить форму входа, регистрации, мини-профиль, информер — в-общем, всё что захотите. Панель выезжащей сбоку: Посмотреть пример 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$ <br /> Кстати, на чистом JS, без jQuery <img rel="usm" src="http://megasoft.3dn.ru/emoticons/Sypsena.gif" border="0" align="absmiddle" alt=":)"> <br /> Хотя кого это волнует. </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> Скрипт делал $USERNAME$
	Профиль ICQ Цитата Вверх

leonP4

Сообщение оставлено 04.08.2010 в 18:55:07 | Сообщение #2

218

чу реально на JS xD ))) зачем так мучиться когда на JQ за пару строк можно сделать happy

Выезжающая панель от $USERNAME$

Страница 1 из 1
1