Методические указания к лабораторным работам по дисциплине технологии разработки веб-систем индекс по учебному плану: в. Дв. 07. 01

жүктеу/скачать 0,75 Mb.

Pdf көрінісі

бет	11/14
Дата	08.11.2023
өлшемі	0,75 Mb.
	#190307
түрі	Методические указания

1 ... 6 7 8 9 10 11 12 13 14

Байланысты:
Metod B1.V.DV.07.01 09.03.01 LR

Методические рекомендации к выполнению задания 3

каждый слой имеет свой
объект document
. Чтобы получить доступ к изображению внутри слоя
imgLayer
, нам необходимо получить доступ к этому объекту document. В
приведенном выше примере такое изображение носило название
davinci
. Все
остальное поле листа должно быть чистым.
Методические рекомендации к выполнению задания 3
Как мы уже видели, слой может содержать несколько различных
объектов. Он могут даже включать в себя другие слои. Конечно, может
возникнуть вопрос, для чего это нужно. На самом деле есть несколько причин,
чтобы пользоваться вложенными слоями. Рассмотрим несколько примеров,
демонстрирующих применение вложенных слоев.
В первом примере используется слой (называемый
parentLayer
), в
который вложено еще два других слоя (
layer1
и
layer2
).
Создайте документ, содержащий три кнопки, которые могут запускать и
останавливать движение слоев. Исходный код скрипта:

// начальна\япозици\я
var pos0= 0;
var pos1= -10;
var pos2= -10;
// движение?
var move0= true;
var move1= false;
var move2= false;
// направление?
var dir0= false;
var dir1= false;
var dir2= true;
function startStop(which) {

if (which == 0) move0= !move0;
if (which == 1) move1= !move1;
if (which == 2) move2= !move2;}
function move() {
if (move0) {
// перемещение parentLayer
if (dir0) pos0--
else pos0++;
if (pos0 < -100) dir0= false;
if (pos0 > 100) dir0= true;
document.layers["parentLayer"].left= 100 + pos0; }
if (move1) {
// перемещение parentLayer
if (dir1) pos1--
else pos1++;
if (pos1 < -20) dir1= false;
if (pos1 > 20) dir1= true;
document.layers["parentLayer"].layers["layer1"].top= 10 + pos1; }
if (move2) {
// перемещение parentLayer
if (dir2) pos2--
else pos2++;
if (pos2 < -20) dir2= false;
if (pos2 > 20) dir2= true;
document.layers["parentLayer"].layers["layer2"].top= 10 + pos2; }}
// -->

Этопервыйслой

Это второй слой

Это главный (родительский) слой

left=0>

Пожалуйста, измените размер этого окна.
"Кликните" поэтойссылке.

Object 0

Object 1

Object 2

нашей HTML-страницы мы
определяем три слоя. После того, как была загружена вся страница, при
помощи программы обработки события
onLoad
, указанной в тэге ,
вызывается функция
init()
:
function init() {
// задать 'перемещаемые' слои
dragObj[0]= document.layers["layer0"];
dragObj[1]= document.layers["layer1"];
dragObj[2]= document.layers["layer2"];}
Массив
dragObj
влючает все слои, которые пользователь может
перемещать. Каждый такой слой получает в множестве
dragObj
некий номер.
Его мы рассмотрим попозже.
Можно видеть, что мы используем тот же самый код, что использовался
ранее для перехвата событий, связанных с мышью:
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
window.onmousedown= startDrag;
window.onmouseup= endDrag;
window.onmousemove= moveIt;
Кфункции
startDrag()
ядобавилследующуюсроку:
currentObj= whichObj(e);
Функция
whichObj()
определяет, по какому объекту был произведен
щелчок. Возвращает она номер соответствующего слоя. Если ни один слой не
был выделен, то возвращается значение
null
. Полученное значение хранится в

переменной
currentObj
. Это означает, что из
currentObj
можно извлечь номер
слоя, который в данный момент необходимо перемещать (либо это будет
null
,
если никакого слоя перемещать не надо).
В функции
whichObj()
для каждого слоя мы проверяем свойства
left
,
top
,
width
и
height
. По этим значеням мы и можем проверять, по которому из
объектов пользователь щелкнул клавишей.

жүктеу/скачать 0,75 Mb.

Достарыңызбен бөлісу:

1 ... 6 7 8 9 10 11 12 13 14