Вертикальный скроллинг изображений.
Вставляем на сайт следующий код:
<p style="text-align:center">
<MARQUEE direction=up
height=250 scrollAmount=2
scrollDelay=20 onmouseover=this.stop()
onmouseout=this.start()>
<a href="scrolling.html"><img src="ckrol/1.jpg"
width="200" alt="" title=""><br></a><br /><br />
<a href="scrolling.html"><img src="ckrol/2.jpg"
width="200" alt="" title=""><br></a><br /><br />
<a href="scrolling.html"><img src="ckrol/3.jpg"
width="200" alt="" title=""><br></a><br /><br />
</font></MARQUEE> </p>
Разберемся с кодом:
direction=up
означает направление скроллинга
Направление скроллинга
up
вверх
down вниз
scrollAmount=2
цифра 2
означает скорость, цифру 2 можно менять на большее число
(быстрее изображения будут двигаться) или на меньшее число
(медленнее).
ckrol/1.jpg
ckrol -это
имя папки на сайте в которой хранятся изображения;
1.jpg
- имя файла изображения; меняем на свое.
Бегущая строка html задаётся тегом
<marquee></marquee>
Для тега бегущей
строки <marquee>
можно также задать:
- высоту строки – height;
- ширину строки – width;
- цвет фона бегущей строки – bgcolor;
- количество прокрутки строки - loop
Scrollamount - скорость движения строки (может
принимать значение от
1 до 10);
Direction - задает направление движения бегущей
строки ("left" - влево, “right”
– вправо, “up” – вверх, “down”
– вниз);
Behavior – режим прокрутки (“scroll”
- обычная прокрутка, “slide” - прокрутка с
остановкой, “аlternate” – движение от края к
краю).
С
помощью нехитрых манипуляций и стилей GSS можно из
бегущей строки сделать мигающую строку. Посмотрите,
как это будет выглядеть:
А вот и код html нашей мигающей строки:
<marquee style="height:30;
width:120; color: #ff0000;" scrollamount="120" scrolldelay="500">Уроки
по<br> изучению<br>основ html</marquee>
Горизонтальный скроллинг
изображений.
Вставляем на сайте следующий код:
<marquee
direction="left"
scrollAmount="3" bgcolor="#FFFFFF" width="300" height="200">
<img
src="ckrol/3.jpg" width="300" height="200" alt=" ">
<img
src="ckrol/1.jpg" width="300" height="200" alt=" ">
<img src="ckrol/2.jpg" width="300" height="200" alt=" ">
</marquee>
Разбираемся с кодом:
direction="left"
означает направление влево;
scrollAmount="3"
цифра 2
означает скорость, цифру 2 можно менять на большее число
(быстрее изображения будут двигаться) или на меньшее число
(медленнее).
ckrol/1.jpg
ckrol -это
имя папки на сайте в которой хранятся изображения;
1.jpg
- имя файла изображения; меняем на свое.
width="300" height="200"
- это размеры изображения.
Скроллинг текста на кнопке.
Код
javascript (вставлять между тегами <head> и </head>):
<script
language="JavaScript">
var id
=
0;
var position
=
0;
var speed
=
120;
//Скорость
function
scrolling()
{
var text
=
" Ура!!! Получилось!!!!";
var k
=
(60
/ text.length)+1;
for(var
i =
0;
i <= k;
i++)
text +=
" "
+ text;
document.scrollingbutton.but.value
= text.substring(position,position+60);
position++;
if(position
== text.length)
position=0;
id =
setTimeout("scrolling()",
speed);
}
function
gotoURL()
{
location.href
=
"http://infform.16mb.com";
//Адрес перехода при нажатии на кнопку
}
</script>Код
HTML (вставлять между тегами <body onload = "scrolling()"> и </body>):
<form
name="scrollingbutton">
<input
type
=
"button"
style
=
"width:400px"
name
=
"but"
onclick
=
"gotoURL()">
</form>
Скроллинг текстовой строки.
На сайте следующий код вставляем:
<marquee direction="right"
scrollAmount="3" bgcolor="#FFFFFF" width="532" height="33">Ура!!!!
Опять получилось!!!!</marquee>
В код
вместо моего текста вставляем свой.
Текст с прокруткой.
Сначала пишем текст, а потом вставляем следующий
код перед своим текстом в самое начало:
<div style="width: 100%; height: 300px;
margin-top: 0px; margin-left: 0px; text-align: center;
font-size: 14px; overflow: auto">
Разбираем код:
1 - это ширина
текста по отношению к странице, сейчас стоит 100% - если хотите
чтоб было меньше просто поменяйте цифру. Да и если Вам по
какой-то причине не нравиться делать в процентах, то вы всегда
можете изменить % на px.
2 - это высота
видимого текста, стоит 300, можете по необходимости менять в
большую или меньшую сторону.
3 - это отступ
сверху от начала сообщения, сейчас стоит 0, если хотите, то
можете поменять и флейм с текстом опустится на нужное Вам
значение.
4 - это отступ
с левой стороны, стоит 0, так же можете поменять на нужное Вам
значение.
Что получилось:
Разбираем код:
1 - это ширина
текста по отношению к странице, сейчас стоит 100% - если хотите
чтоб было меньше просто поменяйте цифру. Да и если Вам по
какой-то причине не нравиться делать в процентах, то вы всегда
можете изменить % на px.
2 - это высота
видимого текста, стоит 300, можете по необходимости менять в
большую или меньшую сторону.
3 - это отступ
сверху от начала сообщения, сейчас стоит 0, если хотите, то
можете поменять и флейм с текстом опустится на нужное Вам
значение.
4 - это отступ
с левой стороны, стоит 0, так же можете поменять на нужное Вам
значение.
