HTML: Популярный самоучитель
В книге кратко и просто описывается язык HTML. Прочитав ее, вы научитесь создавать собственные веб-страницы, причем не только простые, но и содержащие таблицы, видео и звук. Более гибко оформить веб-страницы вам поможет рассмотренная в книге технология CSS. А при желании вы сможете сделать веб-страницы динамичными с помощью сценариев JavaScript: описание этого языка вместе с кратким описанием DOM (объектной модели документа) также приведено в этой книге. В последних главах рассматривается пример создания небольшого сайта с использованием всех рассмотренных в книге технологий, а также освещаются основные вопросы публикации сайта в сети Интернет.
Приведенные в книге коды можно найти на сайте www.piter.com.
Приведенные в книге коды можно найти на сайте www.piter.com.
Пікірлер1
Дәйексөздер372
Пример 13.18. Перетаскивание элементов
Перемещение элементов страницы
var dX, dY; //Координаты точки, за которую "держат" элемент var element; //Перемещаемый элемент var fMoving = false; //==true, если перемещается элемент
//Функция начинает перемещение элемента function start(){
if (event)
fMoving = true;
element = event.srcElement;
//Сохраняем координаты "хватания" элемента dX = event.offsetX;
dY = event.offsetY;
//Для перемещения элемент должен свободно позиционироваться element.style.position = "absolute";
}
//Функция перемещения элемента function move(){
if (fMoving){
//Установим новые координаты для элемента element.style.pixelLeft = event.x – dX;
element.style.pixelTop = event.y – dY;
}
}
Перемещаемый текст
Перемещаемый заголовок
Перемещение элементов страницы
var dX, dY; //Координаты точки, за которую "держат" элемент var element; //Перемещаемый элемент var fMoving = false; //==true, если перемещается элемент
//Функция начинает перемещение элемента function start(){
if (event)
fMoving = true;
element = event.srcElement;
//Сохраняем координаты "хватания" элемента dX = event.offsetX;
dY = event.offsetY;
//Для перемещения элемент должен свободно позиционироваться element.style.position = "absolute";
}
//Функция перемещения элемента function move(){
if (fMoving){
//Установим новые координаты для элемента element.style.pixelLeft = event.x – dX;
element.style.pixelTop = event.y – dY;
}
}
Перемещаемый текст
Перемещаемый заголовок
В следующем примере реализовано перетаскивание элементов страницы с помощью мыши. Перетаскивание элемента начинается при нажатии левой кнопки мыши и заканчивается при ее отпускании. Операции начала перемещения, самого перемещения и «бросания» элемента на новом месте реализованы в обработчиках событий элемента BODY (пример 13.18).
Пример 13.17. Отслеживание положения мыши
Слежение за мышью
.category {font-weight: bold}
.value {font-family: "courier new"}
function move(){
//Записываем в элементы страницы текущее значение
//координат указателя мыши scr.innerText = event.screenX + "x" + event.screenY;
wnd.innerText = event.clientX + "x" + event.clientY;
element.innerText = event.offsetX + "x" + event.offsetY;
prnt.innerText = event.x + "x" + event.y;
//Индикация состояния мыши switch (event.button){
case 0: mouse.innerText = "0|0|0"; break;
case 1: mouse.innerText = "1|0|0"; break;
case 2: mouse.innerText = "0|0|1"; break;
case 3: mouse.innerText = "1|0|1"; break;
case 4: mouse.innerText = "0|1|0"; break;
case 5: mouse.innerText = "1|1|0"; break;
case 6: mouse.innerText = "0|1|1"; break;
case 7: mouse.innerText = "1|1|1"; break;
}
}
Экранные координаты:
Оконные координаты:
Относительно элемента:
Относительно родителя:
Кнопки мыши (л|c|п):
Заголовок
Содержимое страницы…
Слежение за мышью
.category {font-weight: bold}
.value {font-family: "courier new"}
function move(){
//Записываем в элементы страницы текущее значение
//координат указателя мыши scr.innerText = event.screenX + "x" + event.screenY;
wnd.innerText = event.clientX + "x" + event.clientY;
element.innerText = event.offsetX + "x" + event.offsetY;
prnt.innerText = event.x + "x" + event.y;
//Индикация состояния мыши switch (event.button){
case 0: mouse.innerText = "0|0|0"; break;
case 1: mouse.innerText = "1|0|0"; break;
case 2: mouse.innerText = "0|0|1"; break;
case 3: mouse.innerText = "1|0|1"; break;
case 4: mouse.innerText = "0|1|0"; break;
case 5: mouse.innerText = "1|1|0"; break;
case 6: mouse.innerText = "0|1|1"; break;
case 7: mouse.innerText = "1|1|1"; break;
}
}
Экранные координаты:
Оконные координаты:
Относительно элемента:
Относительно родителя:
Кнопки мыши (л|c|п):
Заголовок
Содержимое страницы…
