Контрольные задания

12. Управление CSS-свойствами на JavaScript

Контрольные задания

Выпадающая картинка. Создать приложение, в котором картинка выдвигается от верхней границы родительского блока и задвигается за его верхнюю границу по нажатию на кнопку. Часть картинки за границей родительского блока невидима (отсекается). Предусмотреть движение картинки с ускорением и плавным изменением степени ее прозрачности во время движения от 0 (когда картинки нет на экране) до 1 (когда картинка полностью на экране).

Решение

praxis/12/jobs/01/index.htm

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <META http-equiv="imagetoolbar" content="no">
    <LINK rel="stylesheet" type="text/css" href="main.css">
    <SCRIPT type="text/javascript" src="animateCSS.js"></SCRIPT>
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Выпадающая картинка</TITLE>
  </HEAD>
  <BODY>
    <H1>Выпадающая картинка</H1>
    <DIV>
      <BUTTON id="key">Показать</BUTTON>
    </DIV>

    <DIV id="box">
      <IMG id="pic" src="pic/01.png" width=500 height=313 alt="" title="">
    </DIV>

    <P>
Хочу всего сразу три но, бы без крутые вокруг интервьюирования, 
опять филипа сделано как за. Коде выдают работник где их, бы вот 
работа пунктами небольшой. Так не дефект проектом стратегии, лучше 
состояние предварительного нью он, во процессорах университет мог. 
Прежде чёртов критика во или, дни от плохого фактически распоряжения,
туда работал раннего вот он. Ведёте работник его от. Руководители 
возможностей до дни.
    </P>
    
  </BODY>
</HTML>

Содержимое файла main.css


#box
{
  position:absolute;
  overflow:hidden;
}
#pic
{
  position:relative;
  top:-313px; 
}

Файл main.js


// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
// и построения его объектной модели 
window.onload = function ()
{
  // Получим доступ к объектам 
  var key = document.getElementById("key");
  var box = document.getElementById("box");
  var pic = document.getElementById("pic");

  // Получить высоту картинки 
  var h = pic.height;

  // Надписи на кнопке
  var titleKey = ["Показать", "Спрятать"];
  var indKey = 0;     // Индекс текущей надписи на кнопке
  var keyRest = true; // Равно true, если кнопка отдыхает
                      // и false, если работает 

  // Назначим обработчик событий на кнопку
  key.onclick = function () 
  { 
    if (keyRest) // Запустить анимацию, если кнопка отдыхает
    {
      keyRest = false; // Кнопка работает
      indKey ? hidePic() : showPic();  // Спрятать или показать?
    }
  } 

  // Выдвинуть картинку
  // h -- высота картинки
  function showPic()
  {
    animateCSS(pic, Math.sqrt(h), 25, 
      {
        top: function (frame, time) 
              { return Number(-h+frame*frame)+"px"; },
    opacity: function (frame, time) 
              { return frame*frame/h; },
     filter: function (frame, time) 
              { return "alpha(opacity="+100*frame*frame/h + ")"; }
              
      },
       function (el) // Когда выдвижение закончено
       { 
         el.style.top=0;       // Подровняем картинку
         el.style.opacity=1;   // Установим полную непрозрачность
         el.style.filter="alpha(opacity=100)";
         keyRest = true; 
         indKey = 1; 
         key.innerHTML = titleKey[1];
       });
  } 
  
  // Задвинуть картинку
  // h -- высота картинки
  function hidePic()
  {
    animateCSS(pic, Math.sqrt(h)+1, 25, 
      {
        top: function (frame, time) 
              { return -frame*frame+"px"; },
    opacity: function (frame, time) 
              { return 1-frame*frame/h; },
     filter: function (frame, time) 
              { return "alpha(opacity="+Number(100-100*frame*frame/h) + ")"; }

      }, 
      function () // Когда закончили задвигать
      { 
        keyRest = true; 
        indKey = 0; 
        key.innerHTML = titleKey[0];
      }); 
  } 
};

Пояснения

Будем двигать картинку pic внутри блока box:


<DIV id="box">
  <IMG id="pic" src="pic/01.png" width=500 height=313 alt="" title="">
</DIV>

Для блока box в файле main.css зададим абсолютное позиционирование (чтобы блок вышел из потока и расположился над ним) и укажем правило overflow:hidden (чтобы часть картинки, выходящей из блока была не видна):


#box
{
  position:absolute;
  overflow:hidden;
}

Так как не заданы координаты, они будут равны тем значениям, которые блок занимал бы в потоке.

Для блока pic в файле main.css зададим относительное позиционирование и начальное смещение картинки на ее полную высоту вверх (чтобы она в начальный момент не была видна на экране):


#pic
{
  position:relative;
  top:-313px; 
}

Теперь, чтобы видвинуть картинку, нужно в анимационном цикле менять top от -313px до 0. И, наоборот, при задвижении top будет меняться от 0 до -313px.

Функции, описывающие движение картинки, базируются на функции animateCSS и стилевом свойстве top, дополнительно будем изменять прозрачность. В браузерах, которые работают по стандарту, прозрачностью управляет стилевое свойство opacity, в IE — стилевое свойство filter с указанием функции alpha:


  // Выдвинуть картинку
  // h -- высота картинки
  function showPic()
  {
    animateCSS(pic, Math.sqrt(h), 25, 
      {
        top: function (frame, time) 
              { return Number(-h+frame*frame)+"px"; },
    opacity: function (frame, time) 
              { return frame*frame/h; },
     filter: function (frame, time) 
              { return "alpha(opacity="+100*frame*frame/h + ")"; }
              
      },
       function (el) // Когда выдвижение закончено
       { 
         el.style.top=0;       // Подровняем картинку
         el.style.opacity=1;   // Установим полную непрозрачность
         el.style.filter="alpha(opacity=100)";
         keyRest = true; 
         indKey = 1; 
         key.innerHTML = titleKey[1];
       });
  } 
  
  // Задвинуть картинку
  // h -- высота картинки
  function hidePic()
  {
    animateCSS(pic, Math.sqrt(h)+1, 25, 
      {
        top: function (frame, time) 
              { return -frame*frame+"px"; },
    opacity: function (frame, time) 
              { return 1-frame*frame/h; },
     filter: function (frame, time) 
              { return "alpha(opacity="+Number(100-100*frame*frame/h) + ")"; }

      }, 
      function () // Когда закончили задвигать
      { 
        keyRest = true; 
        indKey = 0; 
        key.innerHTML = titleKey[0];
      }); 
  }

Придумать и реализовать с использованием функции animateCSS какой-либо анимационный эффект на гипертекстовой странице.