Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

Пример JavaScript.

Опубликовано: 02.09.2018

видео Пример JavaScript.

Разбираем JS паттерны на примере модуля

Представляю еще один пример 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>

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

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

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

rss