Пример JavaScript.

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

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

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

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

<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>

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

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

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

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

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