Понедельник, 07.Окт.2024, 02:49:13
Приветствую Вас Гость

 

[ Наша команда · Услуги сайта · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
02:49:13
Обновить
  • Страница 1 из 1
  • 1
Выезжающая панель от $USERNAME$
MaksimilianДата: Воскресенье, 31.Окт.2010, 12:32:58 | Сообщение # 1
Анимешник
Администраторы
Добавить в друзья
Смайл настроения:
Сообщений: 3093
Награды: 570 1
Репутация: 4562
Статус: Offline
Выезжает при наводке мышью.
Полностью кроссбраузерная.
На чистом JavaScript, никакого jQuery.
Пример
Установка:

1. Установим скрипт, который будет реализовывать плавание панели:
Код
<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. Установим саму панель:
Код
  <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>


Панель выезжающая сбоку:
Пример
1
Код
  <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>

2
Код
  <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$
Источник http://megasoft.3dn.ru






Алгоритм 2.5- программа для создания программ
Есть вопросы??? Пиши maksimilian@gold-ak.net
Хочешь помочь сайту? кинь монетку на R273306219163

Награды За создание сайта
За раскрутку проэкта За 50 репутации За 100 репутации За 150 репутации За 200 репутации За 300 репутации За 400 репутации За 500 репутации
За 50 Сообщений За 200 Сообщений За 300 Сообщений
 
My status maksimus-S
ana4220Дата: Пятница, 01.Фев.2013, 22:09:47 | Сообщение # 2
Рядовой
Пользователи
Добавить в друзья
Сообщений: 1
Награды: 1 2
Репутация: 6
Статус: Offline
В описании скриптов отсутствуют пути установки. Это не путь установки (из разряда: догадайся сам) 1. Установим скрипт, который будет реализовывать плавание панели: 2. Установим саму панель:


 
MaksimilianДата: Пятница, 01.Фев.2013, 22:20:32 | Сообщение # 3
Анимешник
Администраторы
Добавить в друзья
Смайл настроения:
Сообщений: 3093
Награды: 570 3
Репутация: 4562
Статус: Offline
ana4220, все после <body> запихни, по крайней мере в примере так сделано biggrin






Алгоритм 2.5- программа для создания программ
Есть вопросы??? Пиши maksimilian@gold-ak.net
Хочешь помочь сайту? кинь монетку на R273306219163

Награды За создание сайта
За раскрутку проэкта За 50 репутации За 100 репутации За 150 репутации За 200 репутации За 300 репутации За 400 репутации За 500 репутации
За 50 Сообщений За 200 Сообщений За 300 Сообщений
 
My status maksimus-S
  • Страница 1 из 1
  • 1
Поиск: