Как сделать подвижный DIV / Layer в HTML - PullRequest
2 голосов
/ 05 марта 2011

Как мне сделать подвижный элемент, который появляется в нижней части экрана.Как вы видите на сайтах, где доступен чат онлайн-поддержки и при загрузке страницы, снизу появляется окно, которое говорит что-то вроде «Нажмите здесь, чтобы пообщаться».Поэтому я просто хочу, чтобы прямоугольник появился снизу, а затем остановился, когда он полностью появился.Я создал пример в Powerpoint, если вы хотите его увидеть.Внизу экрана появится синее поле.

Это файл PPS, который можно загрузить снизу: http://rapidshare.com/files/451089108/Presentation1.pps

Спасибо

1 Ответ

4 голосов
/ 05 марта 2011

Рабочий пример: http://jsfiddle.net/GdFfB/

Как правило, вы хотите скрыть разделительный экран с фиксированной позицией, чтобы начать (должен быть таким же отрицательным, как ваш div будет высоким), поэтому мы используем -100px впример для дна.Затем, как только наша страница будет готова, мы используем jQuery для анимации появления div на экране.Если вы хотите, чтобы div плотнее прилегал к нижней части, вы можете анимировать нижнюю часть до 0, в моем примере я анимировал нижнюю часть до 50, чтобы дать ей немного места.

Редактировать Добавлен фактический код вэтот поток в случае, если JSFiddle решит удалить примеры размещенного кода.

<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>

  <style type='text/css'>
  #chat-box { 
    position:fixed; 
    bottom:-100px; 
    background: #ccc;
  }
  </style>


  <script type='text/javascript'>
  $(document).ready(function(){
  $('#chat-box').animate({bottom:'50'});
  });
  </script>

</head>
<body>
  <div id="chat-box">Click here to chat!</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...