	Главная \| Случайная страница \| Контакты \| Мы поможем в написании вашей работы!

Ступенька 34-ая

⇐ Предыдущая 31 32 33 34 353637 38 39 40 Следующая ⇒

Эту главу мы с вами посвятим специфическом тэгу, речь пойдет о тэге Marquee - бегущей строке (текста).

Тэг Marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют. Т.к. это болезнь массовая, то мне придется рассказать подробно о тэге Marquee (те, у кого броузер не IE, не будут в этой главе оставлены за бортом, для них я бросила спасательный круг в конце главы).

Как видите, все просто. Текст, который мы помещаем в тэге <marquee></marquee>, становится бегущей строкой.

Все атрибуты тэга <marquee></marquee> вам уже знакомы: bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.

Также для бегущей строки можно задать и другие знакомые вам атрибуты - hspace, vspace и align (тот, кто их не помнит, срочно возвращается к Простейшим ступенькам и освежает свою память). В наш пример я их вводить не буду, вы можете сами.

Атрибут loop задает сколько раз прокрутится строка, в нашем примере указано loop="2" - 2 раза, а это значит, что к тому моменту, когда вы дойдете до этого примера, строка может уже не бежать, поэтому обновите страницу и убедитесь в правоте моих слов - строка пробежит только два раза.

Далее будут лишь описания атрибутов без наглядных примеров, подставляйте их сами в код, и смотрите, что будет получаться.

Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).

Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.

Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.

Уф! Все:)

Теперь, когда мы разобрались со всеми параметрами тэга Marquee, я немного позанудничаю, призывая читателя все же быть разумным и не особо злоупотреблять этим тэгом. Вернитесь хотя бы к первому примеру. Посмотрите на бегущую строку задумчиво и признайтесь, что она мешала вам сосредоточиться на чтении и ознакомиться с этой главой, а также смотрится она не очень, непрофессионально, любительски. Уже эти два аргумента должны заставить вас задуматься, нужны ли бегущие строки вам на вашем сайте. Кроме того, текст самой бегущей строки не удобно читать, что опять же служит аргументом против нее. Итак, это не красиво и не удобно, а значит не особо и нужно, только если вы хотите побаловаться в пределах вашей домашней страницы ради интереса.

Итак, что делать, если вы не признаете Internet Explorer, или хотите, чтобы пользователи других броузеров увидели вашу бегущую строку. Помните, в предыдущих главах я упоминала CSS – таблицы каскадных стилей, дополнительное средство, при помощи которого вы можете управлять содержимым ваших страниц.

Кроме таблиц каскадных стилей мы можем вводить в наш html-документ и скрипты, это опять же замечательное средство, чтобы делать ваш неуклюжий HTML-документ динамичным. О скриптах, и как их вводить в наш документ, мы опять же поговорим попозже.

Но почему я завела о них разговор? Дело в том, что при помощи скриптов мы можем ввести бегущую строку в наш документ, это будет правильнее, и это увидят пользователи не только Internet Explorer, но и других броузеров.

Коды скриптов с бегущей строкой в можете посмотреть здесь и здесь, чтобы потом ввести бегущую строку на ваш сайт, если вам этого очень хочется.

Текст в поле форма<html>

<head>

<title>Текст в поле форма</title>

<script language="JavaScript">

var count = -1;

var counter;

var nchar;

var speed = 200; //скорость смены текста

var a = new Array();

a[1] = "введите ваш текст здесь"; // символы строки будут заменены

a[2] = "ВВЕДИТЕ ВАШ ТЕКСТ ЗДЕСЬ"; // на символы этой

len = a[1].length;

function animation() {

count++

if (count == 0){

document.myform.display.value = a[1];

}

if (count == 1){

document.myform.display.value = a[2].substring

(0, 1) + a[1].substring(len, 1);

}

if (count > 1){

a[3] = a[1].substring(0, count - 1) + a[2].substring(count

- 1,count) + a[1].substring(len, count);

document.myform.display.value = a[3];

}

if(count == a[1].length){

count = -1;

}

counter = setTimeout("animation()",speed);

}

</script>

</head>

<body>

<form name="myform">

<p><input name="display" SIZE="30" style="font-family: MS Sans Serif; font-size: 1"> </p>

</form>

<script language="JavaScript">

animation();

</script>

завершенный <a href="http://www.v-exp.ru" target="_blank">отель шереметьево 2 популярный</a> для Вас

<div align="center"><a href="http://www.ucoz.ru/" title="Создать сайт бесплатно"><img style="margin:0;padding:0;border:0;" alt="Hosted by uCoz" src="http://s206.ucoz.net/img/cp/5.gif" width="80" height="15" title="Hosted by uCoz" /></a><br /></div>

</body>

</html><div><span id="openstat2323431"></span><script type="text/javascript">var openstat = { counter: 2323431, next: openstat };(function(d, t, p) {var j = d.createElement(t); j.async = true; j.type = "text/javascript";j.src = ("https:" == p? "https:": "http:") + "//openstat.net/cnt.js";var s = d.getElementsByTagName(t)[0]; s.parentNode.insertBefore(j, s);})(document, "script", document.location.protocol);</script><script type="text/javascript">new Image().src = "http://counter.yadro.ru/hit;narodcounter?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";"+Math.random();</script></div>

Бегущая строка в поле формы

<html>

<head>

<title>Скрипты бегущей строки</title>

function banner(msg,ctrlwidth) {

msg = " --- "+msg

newmsg = msg

while (newmsg.length < ctrlwidth) {newmsg += msg}

document.write ('<FORM NAME="Banner">')

document.write ('<CENTER><INPUT NAME="banner" VALUE= "'+newmsg+'" SIZE= '+ctrlwidth+'></CENTER>')

document.write ('</FORM>')

rollmsg()

}

function rollmsg() {

NowMsg=document.Banner.banner.value

NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1)

document.Banner.banner.value = NowMsg

bannerid=setTimeout("rollmsg()",100)

}

</script>

</head>

<body>

banner("JavaScript.Текст в поле формы.",30)

</script>

</body>

Бегущая строка в поле формы со сменой сообщений.<html>

<head>

<title>Бегущая строка в поле формы со сменой сообщений.</title>

</head>

<body>

<script language="JavaScript">

<!--

// Установка скорости сообщения (пауза в миллисекундах между символами)

var speed = 100 // уменьшите значение для увеличения скорости

// установите паузу между сообщениями

var pause = 1000 // increase value to increase pause

// установите начальное значение

var timerID = null

var bannerRunning = false

var ar = new Array()

// ввод строк

ar[0] = "Добро пожаловать"

ar[1] = "Полезные вещи для HTML"

ar[2] = "Коллекция скриптов"

// установите номер сообщения, которое появится первым

var currentMessage = 0

var offset = 0

function stopBanner() {

if (bannerRunning)

clearTimeout(timerID)

bannerRunning = false

}

function startBanner() {

stopBanner()

showBanner()

}

function showBanner() {

var text = ar[currentMessage]

if (offset < text.length) {

if (text.charAt(offset) == " ")

offset++

var partialMessage = text.substring(0, offset + 1)

document.bannerForm.bannerField.value = partialMessage

offset++ // IE sometimes has trouble with "++offset"

timerID = setTimeout("showBanner()", speed)

bannerRunning = true

} else {

offset = 0

currentMessage++

if (currentMessage == ar.length)

currentMessage = 0

timerID = setTimeout("showBanner()", pause)

bannerRunning = true

}

// -->

</script>

<form name="bannerForm">

<p><input type="text" size="50" name="bannerField" style="font-family: sans-serif; font-size: 8pt; background-color:#006600; color: rgb(0,256,0); text-align: center"></p>

</form>

<script language="JavaScript">

startBanner()

</script>

<a href="http://www.aqua-viva.ru/podrazdel.php?id=70" target="_blank">водопроводные трубы опт</a>

</body>

Бегущая строка с функцией старт/стоп<html>

<head>

<title>Бегущая строка с функцией старт/стоп.</title>

<SCRIPT type="text/javascript" language="JavaScript">

<!--//

var verzoegerung = 100;

// Скорость пробегания

var laenge = 45;

// количество знаков в строке

var pos = 0;

var abbruch;

function laufe()

{

var text = '**************************************** На сайте появилися новый раздел "поиск по базам данных", в котором уже сейчас можно найти несколько поисковиков для клиентской стороны, которые работают на любом хостинге. *****'

var ausgabe='<PRE style="background:#006600; color: #ffff00; ">' +

(text + text).substring(pos, pos + laenge) + '</PRE>';

if (navigator.appName == 'Netscape') with (document.laufband.document)

{

open(); write(ausgabe); close();

}

else

laufband.innerHTML = ausgabe;

pos ++;

if (pos > text.length)

pos = 0;

abbruch = setTimeout('laufe()', verzoegerung);

pause = 0;

}

function startstop()

{

if (pause == 0)

{

clearTimeout(abbruch);

pause = 1;

}

else

{

laufe();

pause = 0;

}

//-->

</SCRIPT>

</head>

<body onLoad='laufe()'>

<DIV id="laufband" style=position:absolute;left:250;top:28;width:400>

</DIV>

<DIV style=position:absolute;left:150;top:25><FORM><INPUT style="color: #00cc00; background-color: #000000; border-color: #00cc00;" type=button value="Start/Stop" onClick='startstop()'></FORM></DIV>

<a href="http://surfari.ru/" target="_blank">серф туры на бали</a>

</body>

Бегущая строка<html>

<body onload="doanim()">

<script language="JavaScript">

<!--

var x=0;var delay=20;var jump=4;

function doanim(){if(document.layers) document.text.left=x; else document.all.text.style.left=x;x-=jump;

if(x<-434) x=0;setTimeout("doanim()", delay);}

//-->

</script>

<div id="text" style="position:absolute;top:0">

<table><tr><td nowrap><strong><em>

Попробуй догани!

</em></strong></td>

</tr>

</table>

</div>

Кризис-время больших возможностей: <a href="http://cul.com.ua/catalogue.html?cat=5" target="_blank">бизнес книги</a>. Вакансии для всех. Интернет.

</body>

Милости просим, гости дорогие.

Скрипты перемены натписи в зависимости от времини

<html>

<head>

<title>Скрипты перемены натписи в зависимости от времини</title>

</head>

<body>

<!--

var h=(new Date()).getHours();

if (h > 23 || h < 7) document.write('Что-то припозднились вы сегодня.');

if (h > 6 && h < 12) document.write('Кто ходит в гости по утрам...');

if (h > 11 && h < 19) document.write('Милости просим, гости дорогие.');

if (h > 18 && h < 24) document. write('Добрый вечер!');

//-->

</script >

</body>

⇐ Предыдущая 31 32 33 34 353637 38 39 40 Следующая ⇒

Дата публикования: 2014-10-25; Прочитано: 434 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!

studopedia.org - Студопедия.Орг - 2014-2024 год. Студопедия не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования (0.034 с)...