• Страница 1 из 1
  • 1
Выезжающая снизу панель на jQuery

серегаДата: Воскресенье, 20.06.2010, 15:21:39 | Сообщение # 1
Генералиссимус
Сообщений: 1544
Награды: 1
Репутация: 2
Данный урок расскажет Вам о том, как сделать выезжающую панель внизу страницы с помощью jQuery.

Подключаем фреймворк и все необходимые скрипты между тегами :

Code
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>    
     <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>    
<script>    
     $(document).ready(function() {    
     var easing_type = 'easeOutBounce';    
     var default_dock_height = '40';    
     var expanded_dock_height = $('#dock').height();    
     var body_height = $(window).height() - default_dock_height;    
     $('#fake-body').height(body_height);    
     $('#dock').css({'height': default_dock_height, 'position':'absolute', 'top': body_height});    
     $(window).resize(function () {    
     updated_height = $(window).height() - default_dock_height;    
     $('#fake-body').height(updated_height);      
     $('#dock').css({'top': updated_height});    
     });    
     $('#dock').mouseover(function () {    
     expanded_height = $(window).height() - expanded_dock_height;    
     $(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type});    
     }).mouseout(function () {    
     body_height = $(window).height() - default_dock_height;    
     $(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type});    
     });    
     });    
     </script>

Не забываем про стили оформления:

Code
<style>    
          
     body {    
     margin:0;      
     padding:0    
     }    
#fake-body {    
     overflow:auto;    
     z-index:1;    
     }    
#dock {    
     background:#ccc url(bg.gif) repeat-x;    
     height:200px;    
     z-index:100;    
     width:100%;    
     }    
</style>

И теперь давайте взглянем на структуру тела документа. Обязательно необходимо все содержание тега поместить в слой с id="fake-body". Без этого панель будет неправильно отображаться.

Code
<div id="fake-body">    
     <!-- Put your entire website in this section -->    
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>    
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>    
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>    
     </div>      
<div id="dock">    
     <!-- Put your dock in this section -->    
     </div>

Пример

Источник: ruseller.com



Делаю сервера и настраиваю их: WoW CS Mu online не дорого isq 499846784

< >
  • Страница 1 из 1
  • 1
Поиск: