ПРАКТИЧЕСКАЯ РАБОТА №29
Цель: Изучить свойства и методы объекта style, научиться перемещать изображение на странице.
Движение объекта на web-странице осуществляется путем изменения свойств, задающих его координаты.
В CSS координаты объекта задаются с помощью свойств left и top.
Свойство left задает горизонтальную координату объекта, которая в случае позиционирования в абсолютных координатах (position:absolute) задает расстояние в пикселях от левой границы экрана.
Свойство top задает вертикальную координату объекта, которая в случае позиционирования в абсолютных координатах задает расстояние в пикселях от верхней границы экрана.
Если задать элементу абсолютное позиционирование и изменять его координаты top и left, то элемент будет двигаться.
Метод setTimeout (expression, msec). Метод setTimeout выполняет выражение или функцию по истечении установленного количества миллисекунд. expression строковое выражение, содержащее имя вызываемой функции, msec числовое значение в миллисекундах.
Задание 1. Создать документ, в котором рисунок img.jpg занимает 50% окна и является нижним слоем. На верхнем слое второй рисунок img2.png, который двигается вправо. Когда второй рисунок достигает края первого рисунка, он останавливается.
Движение изображения вправо:
| <head> <style> #img2 {position:absolute;left:0;top:100} </style> </head> <body> <img src="img.jpg" id="img" width="50%" /> <img src="img2.png" id="img2" width="10%" /> <script type="text/JavaScript"> function f() { x=x+10; // сдвиг рисунка на 10 r2.style.left=x; // изменяем свойство left 2-го рисунка // если он не дошел до края 1-го рисунка // то вызываем каждые 1000 мили сек эту же функцию if (x<x1-x2) setTimeout("f()",700); } x=0; // начало скрипта r1=document.getElementById('img'); r2=document.getElementById('img2'); x1=r1.width; //ширина фона x2=r2.width; //ширина птички f(); </script> </body> |
| Задание 2. Изменим предыдущий документ так, чтобы рисунок img2.png двигался по главной диагонали рисунка img.jpg вниз. При достижении правого нижнего угла рисунок движется вверх по этой же диагонали. При достижении левого верхнего угла этот рисунок снова движется вниз. И так далее. Шаг – расстояние слева и сверху от левого верхнего угла неподвижного рисунка до движущегося рисунка. Если рисунок движется вправо и вниз, то шаг положительный. Если рисунок движется влево и вверх, то шаг отрицательный. | <script type="text/JavaScript"> function f() { x=x+s; y=y+s; // сдвиг рисунка на шаг s r2.style.left=x; r2.style.top=y; if (x>=x1) s=-10; // если долетел до правого края меняем шаг на отрицательный if (x<=0) s=10; // если долетел до левого края меняем шаг на положительный setTimeout("f()",50); } x=0; y=0; s=10; r1=document.getElementById('img'); r2=document.getElementById('img2'); x1=r1.width; //ширина фона f(); </script> |
| Задание 3. Создайте документ, в котором рисунок img.jpg занимает 50% окна и является нижним слоем. На верхнем слое второй рисунок img2.png, который двигается по горизонтали к правой границе первого рисунка, затем на строку (высоту рисунка) вниз и назад, к левой границе, на строку вниз и к правой границе, и т.д. до нижней границы первого рисунка. |  или 
|
Задание 4. Создайте слайд-шоу. Прокомментировать код скрипта.
| i=0; function slideShow() { ris = new Array('img1.png', 'img2.png', 'img3.png'); if (i >= 3) i = 0; // если вышел, обнуляем счётчик. r=document.getElementById('idSlide'); r.src=ris[i]; i++; setTimeout("slideShow()",1500); } |
| Задание 5. Самостоятельно создать примеры движения объектов. |
Контрольные вопросы:
1. Как осуществить движение объектов на web-странице?
2. Как в CSS задать координаты объекта?
3. Какие свойства объекта нужно изменять, чтобы элемент двигался?
4. Составить контрольные вопросы и ответы по ключевым моментам практической работы в количестве 7-10шт.
Отчет должен содержать:
1. Тему, цель
2. Условие задания. Программный код с сценарием JavaScript. Результаты работы программы.
3. Ответы на контрольные вопросы.
4. Вывод.
На защиту предоставить: файлы (html, js) выполненных заданий в электронном виде и примеры сценариев, записанные в конспект с комментарием.