Операции с окном
Для окон, открытых с помощью метода open(), можно выполнять следующие операции:
· перемещение;
· прокрутка;
· изменение размера.
Чтобы окно, открытое с помощью метода open(), передвигалось по экрану, необходимо изменять его координаты: вертикальную, горизонтальную или сразу обе.
Для окон перемещение выполняется с помощью методов moveTo(x, y) и moveBy(dx, dy). Первый метод перемещает окно в точку с заданными координатами x и y, второй – на заданное расстояние по горизонтали dx и вертикали dy (эти значения могут быть как положительными, так и отрицательными).
При использовании этих методов moveTo() и moveBy() окно перемещается в новую позицию практически мгновенно, например, фрагмент сценария
moveWin = window.open("newWindow.html", "movingWindow",
"width=300, height=200, top=0, left=0, status=no,
toolbar=no, menubar=no");
…
moveWin.moveBy(10, 20);
открывает окно moveWin, а затем перемещает его на 10 пикселей по горизонтали и на 20 пикселей по вертикали.
Для плавного движения окна используется анимация, в которой эффект движения достигается сменой изображений через небольшие промежутки времени. При правильно выбранных временных интервалах между выводом изображений (кадров) вследствие инерционности зрения движение воспринимается как непрерывное (плавное).
|
|
Чтобы управлять величиной временных интервалов между кадрами, а, следовательно, и частотой появления кадров, в JavaScript используются методы управления временными интервалами setInterval(), setTimeout(), clearInterval() и clearTimeout() объекта window.
Методы
таймер = setInterval(выражение, интервал, список-аргументов-функции)
и
таймер = setTimeout(выражение, интервал, список-аргументов-функции)
действуют одинаково: вычисляют значение выражения или вызывает функцию, заданную своим именем, каждый раз по истечении заданного интервала (в миллисекундах). Если в первом параметре задан вызов функции и для вызова необходимо задать аргументы, эти аргументы, разделенные запятыми, записываются после аргумента интервал. Методы возвращают созданный объект таймер.
Методы
clearInterval(таймер)
и
clearTimeout(таймер)
останавливают и уничтожают таймер, установленный соответственно методом setInterval() или методом setTimeout().
Используя эти методы, можно обеспечить плавное перемещение окна по экрану. Так, фрагмент сценария
timer = window.setInterval("moveWin.moveBy(10, 20)", 100);
будет запускать выполнять перемещение определенного выше окна moveWin каждые 100 миллисекунд. Для прерывания перемещения надо выполнить предложение
window.clearInterval(timer);
Следует иметь в виду, что это перемещение должно происходить в пределах экрана. Ширину и высоту экрана дисплея можно получить с помощью свойств screen.width и screen.height. Размер окна, занимаемый Web-страницей, можно получить в Internet Explorer с помощью свойств document.body.clientWidth и document.body.clientHeight, а в остальных Web-браузерах – с помощью свойств innerWidth и innerHeight объекта window.
|
|
Так, для ограничения перемещения окна границами экрана дисплея в функции можно использовать следующую последовательность предложений (winLeft – позиция левой границы окна, winWidth – ширина окна, dx – смещение по оси x за один кадр, winTop – позиция верхней границы окна, winHeight – высота окна и dy – смещение по оси y за один кадр):
// Если окно достигло правой или
// левой границ родительского окна
if(winLeft+winWidth+dx > winWidth || winLeft+dx < 0)
// Изменение направления движения
// на противоположное
dx=-dx;
// Если окно достигло нижней или верхней границ родительского окна
if(winTop+dy > windowHeight || winTop+dy < winHeight)
// Изменение направления движения
//на противоположное
dy=-dy;
Пример 4.5.63. Перемещение окна по экрану:
1. Перемещение окна в заданную точку
При щелчке мышью в какой-либо точке экрана окно плавно перемещается в эту точку:
Просмотр примера: Example4-5-63-1.html
Текст документа HTML: Example4-5-63-1
2. Перемещение окна в заданных пределах:
Просмотр примера: Example4-5-63-2.html
Текст документа HTML: Example4-5-63-2