Задача:При входе на домашнюю страницу требуется создать эффект появления верхнего изображения сайта. Изображение должно увеличиваться одновременно по ширине и высоте (см. рис. 18). Эффект появления должен длиться одну секунду.
Реализация эффекта появления изображения сложнее, чем эффект подмены изображения.
Рис. 10.18
Перейдем в верхнюю часть файла index.php, для тега body добавим обработчик события при загрузке страницы:
<body onload="func()">
Событие onload– событие при загрузке страницы. При загрузке страницы будет вызываться функция JavaScript –func(). Эта функция будет находиться в файле puh.js, которыйуже подключен к файлу index.php.
Найдем ячейку таблицы, в которую вставлено верхнее изображение.
Для этой ячейки укажем значения атрибутов: align–горизонтальное выравнивание, valign –вертикальное выравнивание:
<td valign="middle" width="980" align="center">
valign="middle" –выравнивание вертикально по центру,
align="center" –выравнивание горизонтально по центру.
В этом случае содержимое ячейки будет выравниваться по центру.
Для верхнего изображения, для тега img, добавим идентификатор img_logo:
С помощью идентификатора мы будем обращаться к тегу с изображением из JavaScript. Осталось создать программный код JavaScript для реализации эффекта.
Изображение должно появляться из центра. Следовательно, пусть его начальные размеры нулевые.Увеличиваясь по ширине и высоте,изображение должно достигнуть своих полных размеров. Эффект должен происходить одну секунду. Для реализации такого эффекта нам понадобиться таймер (в JavaScript можно использовать таймер, так же как и в Java). Сделаем так, чтобы изменение размеров изображения происходило за 100шагов, тогда один шаг должен выполняться за 10/1000секунды. Значит, временная задержка таймера будет 10/1000секунды. Создание таймера в JavaScriptделается так:
var inter = window.setInterval(vipoln,10);
window –это обращение к окну браузера, setInterval() –указывает имя функции,которая будет вызываться и устанавливать временную задержку таймера. Через переменную inter таймер при необходимости можно удалить:
window.clearInterval(inter);
clearInterval()удаляет таймер.
Размеры изображенияshapka.png составляют 980x150, чтобы за 100шаговполучить полный размер необходимо увеличивать за один шаг на 9.8пикселя по ширине и1.5пикселя по высоте. Таймер должен изменять ширину и высоту изображения, постепенно увеличивая их.
Перейдем в файл puh.js и начнем писать программный код JavaScript:
// Переменная для таймера
var inter;
// Переменные для изменения размеров
var delta1, delta2, delta;
// Переменная для получения тега веб-страницы
var tmp;
В самом верху объявим переменные. Переменная interбудет отвечать за таймер, переменная delta1будет хранить текущую ширину,переменная delta2будет хранить текущую высоту, переменнаяdeltaбудет хранить количество выполненных шагов,переменная tmp будет использоваться для работы с тегом. Под переменными запишем функцию:
// Функция, выполняющая изменение размеров изображения
function vipoln()
{
delta1+=9.8; //Увеличиваем ширину
delta2+=1.5; //Увеличиваем высоту
delta++; //Считаем количество шагов
//Устанавливаем CSS для ширины
tmp.style.width = ""+delta1+"px";
//Устанавливаем CSS для высоты
tmp.style.height = ""+delta2+"px";
// Если уже выполнено 100 шагов
if (delta>=100)
{
//Устанавливаем настоящие размеры изображения
tmp.style.width = "980px";
tmp.style.height = "150px";
// Удаляем таймер
window.clearInterval(inter);
}
}
Функция vipoln()будет вызываться таймером через каждые 10/1000 секунды.
delta1+=9.8; // Увеличиваем ширину
delta2+=1.5; //Увеличиваем высоту
delta++; //Считаем количество шагов
Сначала увеличиваем ширину, высоту и количество проделанных шагов.
//Устанавливаем CSS для ширины
tmp.style.width = ""+delta1+"px";
//Устанавливаем CSS для высоты
tmp.style.height = ""+delta2+"px";
Далее устанавливаемCSS-свойства ширины и высоты изображения. Обратите внимание, что значения CSSявляются строковым типом данных и указываются в кавычках.
// Если уже выполнено 100 шагов
if (delta>=100)
Если уже выполнено100шагов –это значит, что пора установить нормальные размеры изображения и остановить таймер:
// Устанавливаем настоящие размеры изображения
tmp.style.width = "980px";
tmp.style.height = "150px";
// Удаляем таймер
window.clearInterval(inter);
Ниже в файле puh.js необходимо создать еще одну функцию:
// Функция, которая вызывается при загрузке страницы
function func()
{
// Определяем текущий адрес (ссылку)
var str = location.href;
// Проверяем, что в адресе нет символа равно: '='
if (str.indexOf('=', 0)>=0) return;
// Попытка-исключение
try
{
//Находим тег верхнего изображения по идентификатору
tmp = document.getElementById("img_logo");
}
catch (e)
{
return;
}
// Устанавливаем начальные значения ширины, высоты
// и количества шагов по нулям
delta=0;
delta1=0;
delta2=0;
// Запускаем таймер с выполнением функции через
// с указанным интервалом
inter = window.setInterval(vipoln,10);
}
Именно функция func() вызывается в обработчике события при загрузке страницы.
// Определяем текущий адрес (ссылку)
var str = location.href;
Определяем текущий адрес. Это значение из адресной строки браузера. Эффект появления должен срабатывать только при переходе на домашнюю страницу, поэтому нужно определить текущий раздел. В любом разделе,кроме домашней страницы, в адресной строке имеется значение параметра id,например: http://puh/index.php?id=2.
Мы будем искать символ равенства (=),если его нет, - значит мы на домашней странице.
//Проверяем, что в адресе нет символа равно: '='
if (str.indexOf('=', 0)>=0) return;
indexOf() выполняет поиск и возвращает позицию найденного символа, если символ не найден, то возвращается: -1, второй параметр: 0 –указывает номер символа, с которого необходимо начинать поиск.
// Попытка-исключение
try
{
//Находим тег верхнего изображения по идентификатору
tmp = document.getElementById("img_logo");
}
catch (e)
{
return;
}
Далее находим тег по идентификатору. Выполняем поиск через попытку-исключение. Если тег с указанным идентификатором не будет найден –сработает блокcatch.
//Устанавливаем начальные значения ширины,высоты
// и количества шагов по нулям
delta=0;
delta1=0;
delta2=0;
Перед запуском таймера устанавливаем начальные значения переменных: количество выполненных шагов,ширина, высота.
// Запускаем таймер с выполнением функции через
// с указанным интервалом
inter = window.setInterval(vipoln,10);
В самом конце функции запускаем таймер.
Получается следующая схема вызова функций: каждый раз при загрузке страницы вызывается функцияfunc(). Если это домашняя страница (раздел Главная), то запускается таймер. Таймер с интервалом10/1000 секунды вызывает функцию vipoln(). Когда проходит одна секунда –таймер удаляется внутри функции vipoln().
Посмотрим на результат в браузере. При переходе в раздел Главная, запускается эффект появления верхнего изображения.
Итог занятия:На этом занятии мы:• добавили содержимое двух разделов сайта: Главная, Контакты;• поговорили о предназначении JavaScript;• сделали два визуальных эффекта при помощи JavaScript.
Занятие 11. "Создание раздела сайта: Заказать"
На этом занятии мы создадим последний раздел сайта: - реализуем раздел Заказать; - изучим методику отправления данных с веб-страницы; - рассмотрим методику приема данных из PHP; - изучим запись в файл с помощью PHP.
На этом занятии мы создадим последний раздел нашего сайта-Заказать. Этот раздел будет самым сложным по реализации,для его создания мы изучим несколько новых тем. Давайте посмотрим, что у нас должно получиться в результате (см.рис. 11.1):
Рис. 11.1
В самом верху представлен заголовок, ниже находится общая информация по заказу товаров. Еще ниже находится таблица с текущими остатками товаров (см. рис.1). В самом низу расположена форма для отправки контактных данных(см. рис. 11.2):
Рис. 11.2
При нажатии на кнопкуЗаказать звонок –над таблицей с остатками появляется информационное сообщение. В сообщении выводится информация о неверном заполнении контактных данных или сообщение об успешном приеме заявки (см. рис. 11.3):
Рис. 11.3
При успешном приеме заявки –данные передаются на сайт.
