12. Управление CSS-свойствами на JavaScript
Примеры
Пример 1. Прозрачная панель
praxis/12/examples/01/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Прозрачная панель</TITLE>
</HEAD>
<BODY>
<DIV id="mess"></DIV> <!-- заготовка для панели -->
<H1>Прозрачная панель</H1>
<BUTTON id="key">Показать панель</BUTTON>
<P>
Хочу всего сразу три но, бы без крутые вокруг интервьюирования,
опять филипа сделано как за. Коде выдают работник где их, бы вот
работа пунктами небольшой. Так не дефект проектом стратегии, лучше
состояние предварительного нью он, во процессорах университет мог.
Прежде чёртов критика во или, дни от плохого фактически распоряжения,
туда работал раннего вот он. Ведёте работник его от. Руководители
возможностей до дни.
<P>
Две силы давать одного то, ещё ваших ошибок двигает об, уже от каким
этого разработкой. Филипа какому главное уже но, код об учёт
движение безостановочно, три яйце большим действий он. Вам но
заметки несколько, мог плиту убегай минуту бы, тем но работать
метеорного неоригинальные. Он них этих курице программе, меня
кэмбридже различных нью во, тем году обычно соответствующим об.
Например работаешь от его, плохой очередь программистом по нью, мог
ну какого другие страдаете. За люди высокого кто, ну нее размере
предлагаю содержимое. Мы деле содержимое тд, об это запускали
программного, внешних преодолеть программистов их что.
</P>
</BODY>
</HTML>
Содержимое файла main.css
/* Назначим блоку абсолютное позиционирование (то есть поднимем
его над потоком) и сделаем невидимым */
#mess
{
position:absolute;
visibility:hidden;
}
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки
// документа и построения его объектной модели
window.onload = function ()
{
// Получим доступ к объектам
var key = document.getElementById("key");
var mess = document.getElementById("mess");
// Создать панель
// Вызов функции, которая создает панель (описана ниже)
makePanel("Прозрачная панель создана скриптом");
// Функция, которая создает панель
// На экране панель не видна, так как в CSS для нее прописано
// правило: visibility:hidden
// Кроме того, панель не занимает место в потоке, так как в CSS
// указано: position:absolute
function makePanel(text)
{
// Создадим содержание
mess.innerHTML = text;
// Опишем представление
var css = mess.style;
css.left = "100px";
css.top = "200px";
css.width = "300px";
css.height = "200px";
css.border = "1px solid black";
css.padding = "20px";
css.color = "white";
css.background = "blue";
css.fontSize = "40px";
css.fontWeight = "bold";
css.opacity = "0.8"; // Прозрачность, заданная по стандарту W3C
css.filter = "alpha(opacity=80)"; // Прозрачность для IE
}
// Состояние кнопки
var state = 0;
// Надписи на кнопках
var titleKey = ["Показать панель", "Спрятать панель"];
// Назначим обработчик события onclick на кнопку key
key.onclick = function ()
{
state = 1-state; // Смена состояния кнопки
this.innerHTML = titleKey[state]; // Вывод надписи на кнопке
// Показать/спрятать панель
mess.style.visibility = state ? "visible" : "hidden";
};
};
Пример 2. Веселая кнопка
praxis/12/examples/02/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Весёлая кнопка</TITLE>
</HEAD>
<BODY>
<H1>Весёлая кнопка</H1>
<P>
<BUTTON id="key">Весёлая кнопка</BUTTON>
Хочу всего сразу три но, бы без крутые вокруг интервьюирования,
опять филипа сделано как за. Коде выдают работник где их, бы вот
работа пунктами небольшой. Так не дефект проектом стратегии, лучше
состояние предварительного нью он, во процессорах университет мог.
Прежде чёртов критика во или, дни от плохого фактически распоряжения,
туда работал раннего вот он. Ведёте работник его от. Руководители
возможностей до дни.
</P>
</BODY>
</HTML>
Содержимое файла main.css
/* Назначим кнопке относительное позиционирование.
Её координаты left=0 и top=0 будут соответствовать
положению в потоке.
*/
#key
{
position:relative;
}
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
// Получим доступ к кнопке
var key = document.getElementById("key");
var timer; // Таймер
var r = 100; // Радиус круга, по которому двигается кнопка
var fi = 0; // Угол поворота точки вывода кнопки на экран
var dfi = Math.PI/8; // Приращение угла поворота
// Назначим обработчик событий на кнопку
key.onclick = function ()
{
// Если кнопка "отдыхает" запустить таймер
if (!fi) timer = setInterval(moveKey, 25);
};
// Движение кнопки по окружности радиуса r
// Центр окружности смещен на r вправо.
// В начальный момент левый верхний угол кнопки находится
// на окружности слева
function moveKey()
{
if (fi < 2*Math.PI) // Пока не пройден полный круг
{
// Тригонометрия движения по окружности
key.style.left = r*(1-Math.cos(fi)) + "px";
key.style.top = -r*Math.sin(fi) + "px" ;
fi += dfi;
}
else
{
clearInterval(timer);
fi = 0;
key.style.left = key.style.top = 0;
}
}
};
Пример 3. Сложное движение элементов
praxis/12/examples/03/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Сложное движение элементов</TITLE>
</HEAD>
<BODY>
<H1>Сложное движение элементов</H2>
<P>
Солнце вращается по эллиптической орбите. Земля, в свою очередь, вращается
вокруг Солнца также по эллиптической орбите. Наконец, Луна вращается вокруг
Земли, опять же, по эллиптической орбите. И все это вращается одновременно!
Траектория Земли довольно замысловата, а уж о траектории Луны и говорить
нечего!
<P>
Идея этого примера принадлежит Дэну Стайнману. Настоящая реализация
выполнена А. Дувановым с использованием картинок Дэна Стайнмана.
<!-- Блок с картинками -->
<DIV id="all"> <!-- Вся система -->
<IMG src="pic/sun.gif" width=71 height=71> <!-- Солнце -->
<DIV id="earthMoon"> <!-- Земля и луна -->
<IMG id="earth" src="pic/earth.gif" width=32 height=32> <!-- Земля -->
<IMG id="moon" src="pic/moon.gif" width=20 height=20> <!-- Луна -->
</DIV>
</DIV>
</BODY>
</HTML>
Содержимое файла main.css
BODY
{
color:white;
background: url(pic/stars.gif) repeat;
}
P
{
border-top: 1px solid white;
padding-top: 1em;
}
#all, #earthMoon, #moon
{
position:absolute;
visibility:hidden;
}
#earthMoon { z-index:1; }
#moon { z-index:-1; }
#earth { z-index:1; }
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
// Конструктор экранного объекта ===================================
// element -- ссылка на DOM-объект
// leftStart, topStart -- начальные положение объекта на экране
// a, b -- размеры полуосей эллипса
// dfi -- угол поворота точки на дуге эллипса
function objMove(element, leftStart, topStart, a, b, dfi)
{
this.element = element;
this.leftStart = leftStart;
this.topStart = topStart;
this.a = a;
this.b = b;
this.dfi = dfi;
// Установим элемент в точку (leftStart, topStart) на экране
element.style.left = leftStart+"px";
element.style.top = topStart+"px";
// Покажем элемент
element.style.visibility = "visible";
}
// Шаг движения объекта по эллипсу
// Переменная frame -- внешняя -- номер текущего кадра
// Параметрическое уравнение эллипса:
// x = a*cos(t)
// y = b*sin(t)
objMove.prototype.objStep = function ()
{
this.element.style.left =
Number(this.leftStart + this.a*(1-Math.cos(frame*this.dfi))) + "px";
this.element.style.top =
Number(this.topStart-this.b*Math.sin(frame*this.dfi)) + "px";
}
// Конец конструктора ==============================================
// Создадим объекты
var all = new objMove(document.getElementById("all"),
200, 200, 100, 50, Math.PI/500);
var earthMoon = new objMove(document.getElementById("earthMoon"),
-100, 0, 140, 90, Math.PI/150);
var moon = new objMove(document.getElementById("moon"),
-20, 0, 30, 10, Math.PI/50);
var frame = 0; // Номер кадра
var timer = setInterval(
function ()
{
if (frame < Number.MAX_VALUE)
{
all.objStep(); // Передвинуть всю систему
earthMoon.objStep(); // Передвинуть блок Земля-Луна
moon.objStep(); // Передвинуть Луну
// Обработать ситуации Луна за/перед Землей
if (parseInt(moon.element.style.top) < 0)
moon.element.style.zIndex = -1;
else moon.element.style.zIndex = 2;
frame++; // Нарастить номер кадра
}
else clearInterval(timer); // Остановить когда frame == Number.MAX_VALUE
},20);
};
Пример 4. Весёлая кнопка 2
praxis/13/examples/04/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="animateCSS.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Весёлая кнопка 2</TITLE>
</HEAD>
<BODY>
<H1>Весёлая кнопка 2</H1>
<P>
<BUTTON id="key">Весёлая кнопка</BUTTON>
Хочу всего сразу три но, бы без крутые вокруг интервьюирования,
опять филипа сделано как за. Коде выдают работник где их, бы вот
работа пунктами небольшой. Так не дефект проектом стратегии, лучше
состояние предварительного нью он, во процессорах университет мог.
Прежде чёртов критика во или, дни от плохого фактически распоряжения,
туда работал раннего вот он. Ведёте работник его от. Руководители
возможностей до дни.
</P>
</BODY>
</HTML>
Содержимое файла main.css
#key
{
position:relative;
}
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
// Получим доступ к кнопке
var key = document.getElementById("key");
// Блок переменных
var r = 100; // Радиус круга, по которому двигается кнопка
var dfi = Math.PI/8; // Приращение угла поворота
var keyRest = true; // Кнопка отдыхает
// Назначим обработчик событий на кнопку
key.onclick = function ()
{
if (keyRest) // Запустить анимацию, если кнопка отдыхает
{
keyRest = false; // Кнопка работает
// Запустим анимацию кнопки key
// Число кадров -- 2*Math.PI/dfi -- 360 градусов / приращение угла
// Интервал между кадрами -- 25 миллисекунд
animateCSS(key, 2*Math.PI/dfi, 25,
// Определение литерала объекта animation
{
left: function (frame, time)
{return r*(1-Math.cos(frame*dfi)) + "px";},
top: function (frame, time)
{return -r*Math.sin(frame*dfi) + "px";}
},
// определение литерала функции whendone
function (el) {el.style.left = el.style.top = 0; keyRest=true;}
);
}
}
};
Пример 5. Показать картинку
praxis/12/examples/05/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="animateCSS.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Показать картинку</TITLE>
</HEAD>
<BODY>
<H1>Показать картинку</H1>
<DIV>
<BUTTON id="key">Показать</BUTTON>
</DIV>
<DIV id="parentbox">
<DIV id="box">
<IMG id="pic" src="pic/01.png" width=500 height=313 alt="" title="">
</DIV>
</DIV>
<P>
Хочу всего сразу три но, бы без крутые вокруг интервьюирования,
опять филипа сделано как за. Коде выдают работник где их, бы вот
работа пунктами небольшой. Так не дефект проектом стратегии, лучше
состояние предварительного нью он, во процессорах университет мог.
Прежде чёртов критика во или, дни от плохого фактически распоряжения,
туда работал раннего вот он. Ведёте работник его от. Руководители
возможностей до дни.
</P>
</BODY>
</HTML>
Содержимое файла main.css
#parentbox
{
position:relative;
}
#box
{
position:absolute;
clip: rect(0 auto -313px 0);
}
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
// Получим доступ к объектам
var key = document.getElementById("key");
var box = document.getElementById("box");
// Получим высоту картинки
var h = document.getElementById("pic").height;
// Надписи на кнопке
var titleKey = ["Показать", "Спрятать"];
var indKey = 0; // Индекс текущей надписи на кнопке
var keyRest = true; // Равно true, если кнопка отдыхает
// и false, если работает
// Назначим обработчик событий на кнопку
key.onclick = function ()
{
if (keyRest) // Запустить анимацию, если кнопка отдыхает
{
keyRest = false; // Кнопка работает
indKey ? hidePic() : showPic(); // Спрятать или показать?
}
}
// Показать картинку
// Закодируем движение шторки с ускорением.
// Из школьного курса физики известно, что при ускоренном движении
// пройденное расстояние пропорционально квадрату времени (S=a*t*t).
// Поэтому параметр bottom в свойстве clip будем наращивать по
// формуле frame*frame (frame -- номер текущего кадра анимации).
// Тогда общее число кадров анимации, необходимое для раскрытия шторки
// до высоты картинки будет равно Math.sqrt(h), где h -- высота картинки.
// Ниже эта величина увеличена на 1, чтобы учесть возможные округления
// при вычислении квадратного корня.
function showPic()
{
animateCSS(box, Math.sqrt(h)+1, 25,
{
clip: function (frame, time)
{ return "rect(0 auto "+frame*frame+"px 0)"; }
},
function () /* Эта фукция будет вызвана, когда анимация */
{ /* закончится. */
keyRest = true; /* Переключим кнопку в положение "отдыхает" */
indKey = 1; /* Установим индекс текущей надписи на кнопке */
key.innerHTML = titleKey[1]; /* Покажем надпись "Спрятать" */
});
}
// Спрятать картинку
// Работает аналогично, но не открывает, а закрывает шторку
function hidePic()
{
animateCSS(box, Math.sqrt(h)+1, 25,
{
clip: function (frame, time)
{
return "rect(0 auto "+Number(h-frame*frame)+"px 0)";
}
},
function ()
{
keyRest = true;
indKey = 0;
key.innerHTML = titleKey[0];
});
}
};