русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Движение объектов в JavaScript

ОГЛАВЛЕНИЕ

1 Доступ к отмеченным объектам в JavaScript
2 Организация движения объектов в JavaScript
Пример 1

1 Доступ к отмеченным объектам в JavaScript

В "Объекты в html" был рассмотрен способ доступа к объектам на Web-странице с помощью их идентификаторов. Этот метод прост, но требует для каждого объекта, свойства которого необходимо изменить, задания его идентификатора. При большом числе объектов на Web-странице это может вызвать затруднения.

Другим, более универсальным, способом доступа к объектам, является доступ к отмеченным объектам. Для того, чтобы отметить тэг, свойства которого необходимо определить или изменить, достаточно подвести к нему указатель мыши и выполнить одно из событий, совершаемых с помощью мыши, - Mouseover, Mousemove, Mouseout, Click, Dblclick или Contextmenu (описание событий смотрите в Объекты в html). При таком подходе не требуется, чтобы объекты имели идентификаторы.

Доступ к отмеченным элементам и его свойствам осуществляется с помощью такой конструкции:
window.event.srcElement.свойство, где window.event.srcElement - отмеченный объект; свойство - одно из его свойств.

Одним из важных свойств объекта является свойство parentElement, которое указывает на родительский объект. Например, для тэга <BODY> родительским тэгом будет <HTML>. Тогда к свойствам родительского тэга можно обратиться следующим образом: window.event.srcElement.parentElement.свойство. Используя данную конструкцию можно обратиться к свойствам родителя данного родителя, т.е. деда и т.д.

Изменение свойств отмеченного объекта производится так же, как показано в Объекты в html, только вместо указания идентификатора объекта используется приведенная выше конструкция. Например, для изменения цвета отмеченного объекта можно воспользоваться следующим оператором JavaScript: window.event.srcElement.style.color="red".

Если отмеченный объект необходимо использовать не сразу, то можно при его отметке с помощью свойства sourceIndex запомнить его номер (согласно объектной модели документа каждый объект имеет свой номер, например, номер объекта <HTML> равен 0). Тогда номер объекта, отмеченного, например, щелчком мыши можно определить так: onClick="num=window.event.srcElement.sourceIndex".
В дальнейшем доступ к отмеченному объекту с номером num можно осуществить следующим образом:
document.all(num).свойство.

Оглавление

2 Организация движения объектов в JavaScript

Режим позиционирования объекта, т.е. помещения его на экран задается с помощью свойства CSS position, которое имеет следующие значения:

  • static - положение объекта на экране задается браузером в соответствии с порядком, в котором объект указан в HTML-документе (режим задан по умолчанию и не использует координат объекта);
  • relative - положение объекта на экране задается с помощью координат относительно того места на экране, куда браузер поместил бы объект в режиме static;
  • absolute - положение объекта на экране задается с помощью его координат относительно левого верхнего угла экрана.

Движение объекта на Web-странице осуществляется путем изменения свойств, задающих его координаты. В CSS координаты объекта задаются с помощью свойств left и top.

Свойство left задает горизонтальную координату объекта, которая в случае позиционирования в абсолютных координатах (position:absolute) задает расстояние в пикселях от левой границы экрана.
Свойство top задает вертикальную координату объекта, которая в случае позиционирования в абсолютных координатах задает расстояние в пикселях от верхней границы экрана.

При движении объекта важно знать размеры экрана браузера. Свойство объекта <BODY> document.body.clientWidth указывает на ширину экрана в пикселях, а свойство document.body.clientHeight - на высоту экрана в пикселях.

В примере № 1 показано применение средств CSS и JavaScript для организации движения буквы Z (тэг <P>) из точки с координатами: left=0; top=200 слева направо по синусоиде: f(x)=50sin(x). Для того, чтобы буква в конце движения осталась внутри экрана в качестве линий окончания движения приняты линии в 25 пикселей от правой и верхней границ экрана.

Отметка объекта осуществляется по щелчку мыши (буква становится красной). Движение начинается по нажатию любой клавиши клавиатуры.

Пример 1

<HTML>
<HEAD>
<TITLE> Движение в JavaScript </TITLE>
<SCRIPT>
T=0; X=0; Y=200;
function f(x)
{
return 50*Math.sin(x*Math.PI/180); // x указан в градусах
}
function moveZ() //Движение буквы Z
{
with (document.all(n))
if ((style.pixelLeft<document.body.clientWidth-25)
&& (style.pixelTop>25))
{
style.pixelLeft=X+T;
style.pixelTop=Y-f(T);
T+=10; //Скорость движения
setTimeout("moveTxt()",250)
}
}
</SCRIPT>
</HEAD>
<BODY onKeydown="moveZ()">
<P style="color:blue;font-size=8mm; position:absolute;left:0;top:200"
onMouseover="window.event.srcElement.style.color='red'; n=window.event.srcElement.sourceIndex"> Z
</BODY>
</HTML>

Оглавление

Просмотров: 19100

Вы можете --> заказать сайт - полноценный или в качестве обучения для студентов.

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.