Читайте также:
|
В этом сценарии воспользуемся свойством pixelLeft объекта style, задающим положение левой границы фрагмента текста в пикселах.
<html>
<head>
<script>
function movetxt()
{
if (zzz.style.pixelLeft < 500)
{
zzz.style.pixelLeft += 2;
setTimeout ("movetxt()", 50);
}
}
</script>
</head>
<body onLoad = "movetxt()">
<div id="zzz" style="position:relative;top:0;left:0">Text goes here.</div>
</body>
</html>
Упражнение. Создайте средствами JavaScript бегущую строку, в которой текст, дошедший до правого края окна браузера, появляется вновь у левого. Ширину окна браузера можно определить с помощью свойства document.body.clientWidth.
Упражнение. Создайте текст, перемещающийся по вертикали и при достижении нижней границы окна браузера появляющийся вновь у верхней. Положение верхней границы фрагмента текста задаётся свойством pixelTop. Высоту окна браузера можно определить с помощью свойства document.body.clientHeight.
Изменение цвета текста под указателем мыши
Вы уже знаете, как изменить цвет гиперссылки при наведении на неё указателя мыши, используя псевдоклассы для тэга <a>. Можно изменить цвет и у обычного текста, но для этого понадобится использование JavaScript. Создадим две функции смены цвета и будем вызывать их по событиям onMouseover и onMouseout:
<html>
<head>
<script>
function colorchange()
{
zzz.style.color = "red";
}
function colorchangeback()
{
zzz.style.color = "black";
}
</script>
</head>
<body>
<p id="zzz" onMouseover = "colorchange()"
onMouseout = "colorchangeback()">
This text changes color under mouse pointer.</p>
</body>
</html>
Упражнение. Создайте текст, у которого при наведении указателя цвет меняется постепенно. (Указание. Создайте массив цветов. Первое изменение цвета сделайте по событию onMouseOver, затем с помощью функции setTimeout придавайте тексту остальные цвета через некоторые промежутки времени.)
Примечание. Свойства объекта style в JavaScript имеют те же имена, что и свойства форматирования в CSS. Исключение составляют свойства, которые в CSS пишутся через дефис (-), поскольку в JavaScript нельзя использовать дефисы в именах переменных. В этом случае дефис из имени свойства удаляется, а следующая за ним буква заменяется на заглавную (например, textDecoration для свойства text-decoration).
Дата добавления: 2015-07-26; просмотров: 52 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Использование объекта Date | | | Смена изображения под указателем мыши |