Пример JavaScript: прокручивающийся текст.

Представляю еще один пример JavaScript. Его использование можно посмотреть на сайте школьного музея.Пример JavaScript

Скрипт позволяет прокручивать какой-либо текст в блоке прямоугольной формы. Этот скрипт экономит место на странице сайта, позволяет не прокручивать всю страницу. Его удобно использовать , когда нужно сделать описание какого-нибудь объекта.

Например, описание картины. Скрипт позволит рассматривать картину и читать текст к ней в блоке, расположенном рядом. Текст прокручивается при наведении указателя мыши на стрелочки, расположенные под ним.

Ниже приведен код скрипта, который нужно вставить в том месте web-страницы, где должен быть прокручивающийся текст. Например, в ячейку таблицы при табличной верстке.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<span style="color: #333399;"><script type="text/javascript"></span>
<span style="color: #333399;">iens6=document.all||document.getElementById</span>
<span style="color: #333399;">ns4=document.layers</span>
<span style="color: #333399;">//specify speed of scroll (greater=faster)</span>
<span style="color: #333399;">var speed=5</span>
<span style="color: #333399;">if (iens6){</span>
<span style="color: #333399;">document.write('<div id="container" style=" background:#eobd76; position:relative;width:190px;height:380px;border:0px solid black;overflow:hidden">')</span>
<span style="color: #333399;">document.write('<div id="content" style="background:#eobd76; position:absolute;width:190px;left:0;top:0">')</span>
<span style="color: #333399;">}</span>
<span style="color: #333399;"></script></span>
<span style="color: #333399;"><ilayer name="nscontainer"  width=190 height=380 clip="0,0,190,380"></span>
<span style="color: #333399;"><layer name="nscontent" width=190 height=380 visibility=hidden bgcolor="#E2C079"></span>
<span style="color: #333399;"> </span>
<span style="color: #333399;"><--здесь  находится непосредственно контент--></span>
<span style="color: #333399;"><p>Картинная галерея началась в  старой школе с первой выставки рисунков бывшего выпускника школы, художника  Сергея Андреевича Варламова в 1960 году.  Это ценное собрание рисунков (64 работы)   перешло  в 1985 году в новую школу. <br></span>
<span style="color: #333399;">В 1993 году местный художник  Валентин Георгиевич Игошин подарил школе 34 картины, а также альбом, в котором  рассказывается о жизни и творчестве художника.<br></span>
<span style="color: #333399;">В  2008 году на Варламовских чтениях в честь 100-летия со дня рождения С. А.  Варламова галерее были подарены картины   оренбургского художника Константина Сергеевича Кузенова, посвященные  истории села Петровского, а также картины оренбургских художников Шлеюк  Анатолия и Светланы.    <br></span>
<span style="color: #333399;">В  2009 году на пушкинском вечере, посвященном 210-летию со дня рождения А. С.  Пушкина, галерея пополнилась новыми экспонатами: скульптурным портретом А. С  Пушкина, лично врученным автором – Надеждой Гавриловной Петиной, гравюрой  Андрея Филипповича Преснова, а также новыми работами Константина Сергеевича  Кузенова.</p></span>
<span style="color: #333399;"><span>В 2009 году руководство московской Третьяковской галереи прислало  несколько репродукций, сделанных с шедевров русской живописи – полотен Васнецова,  Саврасова, Шишкина, Левитана.</span> </layer></ilayer></span>
<span style="color: #333399;"> </span>
<span style="color: #333399;"><script language="JavaScript1.2"></span>
<span style="color: #333399;">if (iens6)</span>
<span style="color: #333399;">document.write('</div></div>')</span>
<span style="color: #333399;"></script></span>
<span style="color: #333399;"><table width="175px"><td><p align="right"></span>
<span style="color: #333399;"><a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="images/up000000.gif" border=0></a>  <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="images/down0000.gif" border=0></a></p></td></span>
<span style="color: #333399;"></table></span>
<span style="color: #333399;"><script language="JavaScript1.2"></span>
<span style="color: #333399;">if (iens6){</span>
<span style="color: #333399;">var crossobj=document.getElementById? document.getElementById("content") : document.all.content</span>
<span style="color: #333399;">var contentheight=crossobj.offsetHeight</span>
<span style="color: #333399;">}</span>
<span style="color: #333399;">else if (ns4){</span>
<span style="color: #333399;">var crossobj=document.nscontainer.document.nscontent</span>
<span style="color: #333399;">var contentheight=crossobj.clip.height</span>
<span style="color: #333399;">}</span>
<span style="color: #333399;">function movedown(){</span>
<span style="color: #333399;">if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))</span>
<span style="color: #333399;">crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"</span>
<span style="color: #333399;">else if (ns4&&crossobj.top>=(contentheight*(-1)+100))</span>
<span style="color: #333399;">crossobj.top-=speed</span>
<span style="color: #333399;">movedownvar=setTimeout("movedown()",100)</span>
<span style="color: #333399;">}</span>
<span style="color: #333399;">function moveup(){</span>
<span style="color: #333399;">if (iens6&&parseInt(crossobj.style.top)<=0)</span>
<span style="color: #333399;">crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"</span>
<span style="color: #333399;">else if (ns4&&crossobj.top<=0)</span>
<span style="color: #333399;">crossobj.top+=speed</span>
<span style="color: #333399;">moveupvar=setTimeout("moveup()",100)</span>
<span style="color: #333399;">}</span>
<span style="color: #333399;">function getcontent_height(){</span>
<span style="color: #333399;">if (iens6)</span>
<span style="color: #333399;">contentheight=crossobj.offsetHeight</span>
<span style="color: #333399;">else if (ns4)</span>
<span style="color: #333399;">document.nscontainer.document.nscontent.visibility="show"</span>
<span style="color: #333399;">}</span>
<span style="color: #333399;">window.onload=getcontent_height</span>
<span style="color: #333399;"></script></span>

Основные настройки, которые необходимы при работе со скриптом:Пример JavaScript

  • Фоновый цвет (background);
  • Ширина блока (width), нужно изменять пять чисел;
  • Высота блока(height), нужно изменять четыре числа;
  • Толщина линии обводки (border).

Следует отметить, что внутри блока можно размещать не только текст, но и более сложный контент. Например, можно вставить список с картинками-миниатюрами и т. д. Пробуйте, экспериментируйте. В одной из следующих статей мы рассмотрим еще один пример JavaScript.

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Проголосуйте за статью, нажмите кнопку социальной сети.

Еще советую почитать по этой теме:

Как использовать нестандартные шрифты для сайта
Здравствуйте, уважаемые читатели! В предыдущей статье «Применение стилей CSS в редакторе WordPress» я писал о том, как нестандартным образом, используя строчные CSS-стили, оформить контент на ...
Оптимизация сайта с помощью схемы data: URL
Здравствуйте, уважаемые читатели! В сегодняшней статье я хочу рассказать еще об одном методе оптимизации сайта, в основе которого лежит схема, которую обычно называют data: URL. ...
Адаптивный дизайн или мобильная версия
Совсем недавно, буквально 10 лет назад, веб-дизайнеры при создании сайтов ориентировались на определенную среднюю ширину экрана монитора пользователей. Сначала наиболее распространенное разрешение было 800*600, ...
Какой должна быть структура сайта?
Здравствуйте! Как вы думаете, какое значение в продвижении сайта имеет его структура? Я считаю это понятие очень важным, уверен, что от его структуры зависит очень ...
Уроки Adobe Muse
Здравствуйте, уважаемые читатели блога kviter.ru! В сегодняшней статье я хочу посоветовать уроки для изучения современного визуального редактора Adobe Muse. Скачав уроки бесплатного курса Adobe Muse, вы можете ...
Очень плохоПлохоСреднеХорошоОтлично (голосов: 1 в среднем: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *