Меняющийся информационный блок на jQuery

Сегодня мы научимся делать меняющийся информационный блок на jQuery.

Шаг 1.

Скачаем и подключим необходимые скрипты. А именно скрипт jQuery 1.2.6.js и скрипт самого эффекта jQueryCycle.js. Для подключения нам необходимо разархивировать содержимое в папку scripts в корне сайта, а также вписать между тегами <hеad></hеad> следующий код:

<script type="text/javascript" src="scripts/jQuery 1.2.6.js"></script>
  <script type="text/javascript" src="scripts/jQueryCycle.js"></script>
  <script type="text/javascript">
  $.fn.cycle.defaults.timeout = 6000;
  $(function() {
$('td pre code').each(function() {
eval($(this).text());
});
});
</script>

Шаг 2.

Вставим в документ таблицу, с нужной нам шириной блока. В моем случае это 300 px.
<table width="300" border="0">
<tr>
<td>Здесь будет меняющийся информационный блок</td>
</tr>
</table>

Шаг 3.

Теперь вместо надписи из предыдущего шага вставим код скрипта:
  <div id="s6">
  <div>
  Страница 1.
  </div
  <div> 
  Страница 2.
  </div>
  <div> 
  Страница 3.  
  </div>
  </div>
  <pre><code class="mix">$('#s6').cycle({
  fx:     'scrollUp',
  timeout: 6000,
  delay:  -2000
  });</code></pre>

Вместо слов "Страница 1, 2, 3" можете вставить любой текст, картинки, ссылки и т.п.

Изменяя параметр "fx:" на значения scrollUp, scrollDown, scrollRight, scrollLeft, можете добиться нужного направления анимации блока.

Значение timeout - это время задержки одного кадра в милисекундах. Его вы тоже можете изменять по своему усмотрению.

Шаг 4.

В таблице стилей создадим стиль для тега <pre>
PRE {
DISPLAY: none
}

Готово!

Добавлено: 09 Мая 2018 14:31:53 Добавил: Андрей Ковальчук

Интересный информационный блок с помощью jQuery

В этом уроке Вы узнаете, как создать простой, но очень интересный информационный блок.

Ему можно придумать разные применения: от навигации по сайту, до простой галереи. Кроме этого, это может пригодиться при описании преимуществ какого-либо товара или сервиса (например, хостинга).

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

HTML

<div id="example-links">
<a href="#">Example 1</a>
<a href="#">Example 2</a>
<a href="#">Example 3</a>
<a href="#">Example 4</a>
<a href="#">Example 5</a>
</div>
<div id="example-content-container">
<div id="example-content">
<div><b>Example content 1</b><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque varius volutpat. Etiam non neque erat, nec molestie orci. Donec a lacus ut diam semper interdum et quis magna. Donec sagittis quam sit amet dui venenatis malesuada placerat quam facilisis.</div>
<div><b>Example content 2</b><br />Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</div>
<div><b>Example content 3</b><br />Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</div>
<div><b>Example content 4</b><br />Proin pretium purus ac ligula interdum varius. Mauris lobortis, risus id dapibus molestie, ipsum nunc consectetur risus, vel elementum nisi augue aliquet sapien. Phasellus vehicula purus et ante ultrices a mollis velit consectetur. Duis sapien risus, condimentum et pharetra in, sagittis quis felis. Suspendisse ornare odio non augue scelerisque volutpat. Phasellus interdum urna in erat adipiscing fringilla.</div>
<div><b>Example content 5</b><br />Ut nisi lacus, mollis id convallis a, accumsan quis nisi. Donec tempus lacinia hendrerit. Mauris fermentum nibh ac mi bibendum laoreet. Sed faucibus libero est, pulvinar aliquet justo. Nullam nisi nisl, sollicitudin vel lobortis id, commodo ut est. Pellentesque tellus mauris, imperdiet id condimentum vitae, condimentum eget ligula. Duis ut lacus magna, non consectetur justo.</div>
</div>
</div>
<div style="clear:both"></div>

Как Вы видите, слева у нас ссылки переключения блоков, справа сами блоки с контентом.

jQuery
$('#example-links a').click(function(){
var index = $("#example-links a").index(this);
$('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
return false;
});

Данный код производит переключение между блоками при нажатии.

Если же хотите, чтобы блоки менялись при наведении мышки, тогда используйте следующий код:
$('#example-links a').hover(function(){
var index = $("#example-links a").index(this);
$('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
});

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

Кроме этого обязательно необходимо в шапке документа подключить фреймворк jQuery:
<script language="javascript" src="jquery-1.2.6.min.js" type="text/javascript">
      </script>

CSS

И в конце нам понадобится немного стилей оформления для придания формы. Их Вы можете разместить в отдельном файле, или же вставить в тот же документ.
<style type="text/css">
#example-links {
      border: 1px solid #ccc;
      border-bottom: none;
      float: left;
      width: 200px;
      }
      #example-links a {
      border-bottom: 1px solid #ccc;
      display: block;
      font-size: 17px;

      height: 39px;
      line-height: 39px;
      padding-left: 10px;
      }
      #example-links a:focus {
      outline: 0;
      }

      #example-links a:hover {
      background-color: #ddd;
      }
      #example-content-container {
      border: 1px solid #ccc;
      border-left: none;
      height: 200px;
      overflow: hidden;
      width: 350px;
      }
      #example-content div {
      height: 200px;
      padding: 10px;
      }
    
</style>

Вот и все готово! До следующих уроков.

Добавлено: 09 Мая 2018 12:55:46 Добавил: Андрей Ковальчук

Еще одна выплывающая панель с помощью jQuery

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

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

Прежде всего в шапке документа нам необходимо подключить фреймворк, таблицу стилей и вспомогательные скрипты:

<link rel="stylesheet" href="slidebox.css" type="text/css" media="screen" /> 
<script src="jquery.js" type="text/javascript"></script>

<script src="slidebox.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

$("#testZone").slideBox({width: "100%", height: "200px", position: "top"});
});
</script>

Как Вы видите в последней функции мы указали класс, ширину, высоту и позицию нашей панели. Достаточно поменять top на bottom и панель поменяет свое положение.

Далее идет код, который используется для наполнения панели разными ссылками. Тут Вы можете дать волю фантазии.
<div id="testZone">
<ul id="list-1" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>

<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>

<ul id="list-2" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>

<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>

<ul id="list-3" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>

<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>

<ul id="list-4" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>

<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>
</div>

Вот и все готово! Спасибо за внимание.

Добавлено: 09 Мая 2018 12:52:33 Добавил: Андрей Ковальчук

Классное меню с выпадающими элементами

Данный урок покажет Вам как сделать красивое dropdown меню, которое подойдет под любой сайт.

Это меню чрезвычайно легкое (занимает всего 1.4 кб), очень легко устанавливается и классно выглядит.

Давайте начнем. Для начала подключаем стили оформления и скрипт меню (между тегами <head></head>):

<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>

Далее идет HTML структура меню. Код ниже показывает только код, который относится к первому элементу меню "Dropdown One":
<ul class="menu" id="menu">
	<li><a href="#" class="menulink">Dropdown One</a>
		<ul>
			<li><a href="#">Navigation Item 1</a></li>
			<li>
				<a href="#" class="sub">Navigation Item 2</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
					<li><a href="#">Navigation Item 3</a></li>
					<li><a href="#">Navigation Item 4</a></li>
					<li><a href="#">Navigation Item 5</a></li>
				</ul>
			</li>
			<li>
				<a href="#" class="sub">Navigation Item 3</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
					<li>
						<a href="#" class="sub">Navigation Item 3</a>
						<ul>
							<li class="topline"><a href="#">Navigation Item 1</a></li>
							<li><a href="#">Navigation Item 2</a></li>
							<li><a href="#">Navigation Item 3</a></li>
							<li><a href="#">Navigation Item 4</a></li>
							<li><a href="#">Navigation Item 5</a></li>
							<li><a href="#">Navigation Item 6</a></li>
						</ul>
					</li>
					<li><a href="#">Navigation Item 4</a></li>
				</ul>
			</li>
			<li><a href="#">Navigation Item 4</a></li>
			<li><a href="#">Navigation Item 5</a></li>
		</ul>
	</li>
	...
</ul>

Как Вы видите все предельно просто. Всплывающие подменю оформляются в виде списка с помощью тегов <ul> и <li>.

После меню в самом конце документа нам необходимо вставить еще одну небольшую функцию:
<script type="text/javascript">
	var menu=new menu.dd("menu");
	menu.init("menu","menuhover");
</script>

Классное меню готово! Всем спасибо за внимание!

Добавлено: 09 Мая 2018 12:41:13 Добавил: Андрей Ковальчук

Учимся считать средствами CSS

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

Это может быть очень полезно, если у вас сайт с уроками — где пошагово объясняются рецепты веб программирования, и каждому можно причислить собственный номер. CSS счётчики помогут автоматизировать процесс подсчёта, который можно использовать, к примеру, для подписи номеров изображений.

В этом уроке, я продемонстрирую работу CSS счётчиков на примере нумерации параграфов.

HTML

<section>
    <p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
    <p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
    <p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p>
    <p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
    <p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
</section>

В данном HTML фрагменте, каждый параграф представляет собой отдельный шаг, который мы пронумеруем с помощью CSS тремя строчками кода.

CSS
CSS используют свойство counter-increment. Оно было введено в CSS 2.1. Для того чтобы заюзать данную фишку, сначала нам нужно сбить значение счётчика до 0 ещё до того как что-то было подсчитано, так что, это можно сделать это в body:
body {
  counter-reset: steps;
}

Данная строчка собьёт значение счётчика до 0 и задаст определённое имя, для того чтобы в будущем мы могли создать и другие счётчики для этой же страницы.

Следующий шаг - это использование псевдо класса :before для получения доступа ко всем параграфам, а точнее к их началу. Для того чтобы перед текстом каждого параграфа приписать номер нам нужно увеличить значение счётчика, а затем вывести его. Мы можем приписать не только номер, но и слово. К примеру, “Step ”, а затем значение счётчика:
p:before {
  counter-increment: steps;
  content: "Step " counter(steps) ": ";
}

Так же добавим немного стиля самому тексту и префиксу:
p {
 color: #242424;
 font-family: arial, sans-serif;
 font-size: 16px;
 line-height: 20px;
}
 
p:before {
  counter-increment: steps;
  content: "Step " counter(steps) ": ";
  font-weight: bold;
  font-size: 18px;
}

Добавлено: 09 Мая 2018 12:39:51 Добавил: Андрей Ковальчук

Привлеки внимание посетителей с помощью модальных окон

В этом уроке Вы узнаете как сделать модальное окно, которое точно привлечет внимание любого посетителя.

С самого начала документа подключаем фреймворк и функцию::

<script type="text/javascript" src="jquery.tools.min.js"></script>
      <script type="text/javascript">
      $(function() {    
$("#alert").overlay({
      finish: {top: 'center'},
      expose: '#951756'
});
});
      </script>

Далее подключаем стили оформления. В данном примере я использовал и внешнюю таблицу стилей и внутренние стили. Можете их объединить в одном месте, если желаете.
<link rel="stylesheet" type="text/css" href="overlay-minimal.css"/>
<style>
      body {
      padding:150px 50px;
      font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
      }
      #alert {
      width:300px;
      height:220px;
      }
#alert div.close {

      top:0;
      right:0;
      }
#alert h2 {
      background-image:url(alert.png);
      background-position:6px center;
      background-repeat:no-repeat;
      padding:10px 0 10px 60px;
      margin-top:-10px;
      }
  </style>

В коде присутствуют пути к картинкам, так что если будете их переносить - не забывайте про пути.

В теле документа создаем кнопку, которая вызывает модальное окно. Содержимое окна также прописываем здесь.
<button type="button" onClick='$("#alert").overlay().load();'>Open alert</button>
<!-- our alert box -->
      <div class="overlay" id="alert">
 <h2>A nasty alert box.</h2>
 <p>

      Class aptent taciti sociosqu ad litora torquent per conubia nostra,
      per inceptos himenaeos. Donec lorem ligula, elementum vitae,
      imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
  </p>
</div>

Все готово! До завтра.

Добавлено: 09 Мая 2018 12:24:19 Добавил: Андрей Ковальчук

Создание классного эффекта при наведении мышки на изображение

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

Все будет проделано благодаря замечательному фреймворку jQuery.

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

 <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/style.css" />
  
  <script type="text/javascript" src="jquery.min.js"></script>
  <title>Untitled Document</title>
  
  <script type="text/javascript">
      $(function() {
      $(".slideBox").hover(function(){
      $(this).find("img").stop().animate({
      top:-325
      }, 500);
      }, function(){
      $(this).find("img").stop().animate({
      top:0
      }, 500);
      });
      });
 </script>

Теперь в теле документа нам необходимо в слой с классом "slideBox" поместить изображение и текст под ним. Текст в свою очередь должен находится внутри <div> с классом "content":
<div id="container">
      
  <div class="slideBox">
  <img src="images/picture1.jpg" alt="testing" />
  
  <div class="content">
  <h1>HTML Ipsum Presents</h1>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  </div>
  
  </div>
  </div><!--end slideBox-->
  
  <div class="slideBox">
  <img src="images/picture2.jpg" alt="testing" />
 <div class="content">
  <h1>HTML Ipsum Presents</h1>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  </div>
 </div>
  </div><!--end slideBox-->
  
  </div><!--end container-->

Как Вы видите под картинкой может быть не просто текст, а полноценный HTML код.

На сегодня все! Всем удачи!!!

Добавлено: 09 Мая 2018 12:16:40 Добавил: Андрей Ковальчук

Помните про "transition: all"

Часто, при исследовании кода CSS3, можно обнаружить строки, подобные нижеприведенному примеру (префиксы браузеров опущены для наглядности):

.element {
    width: 400px;
    height: 400px;
    transition: width 1s ease-in;
}
 
.element:hover {
    width: 500px;
}

В примере определяется высота и ширина элемента, а затем определяется инструкция для изменения ширины при наведении курсора мыши. В короткой записи свойства transition определяются свойства, которые будут трансформироваться.

Если в дальнейшем возникнет необходимость анимировать изменение и высоты и ширины, то придется изменить описание следующим образом:
.element {
    width: 400px;
    height: 400px;
    transition: width 1s ease-in, height 1s ease-in;
}
 
.element:hover {
    width: 500px;
    height: 500px;
}

Свойство transition позволяет использовать описание изменения нескольких свойств, перечисленных через запятую. Но обычно используется одинаковая длительность и функция перехода, поэтому такая запись будет избыточна и ее лучше заменить следующим кодом:
.element {
    width: 400px;
    height: 400px;
    transition: all 1s ease-in;
}
 
.element:hover {
    width: 500px;
    height: 500px;
}

Здесь используется ключевое слово all для определения того, что все свойства будут трансформироваться. В действительности ключевое слово “all” используется по умолчанию для свойства transition-property, так что можно еще более сократить запись:
.element {
    width: 400px;
    height: 400px;
    transition: 1s ease-in;
}

Данный код будет производить те же действия - трансформация и высоты и ширины (и любого другого свойства, которое может быть добавлено позже). Интерсно, что для короткой записи требуется только указание длительности, так что можно оставить transition: 1s, и все должно работать также, за исключением использования функции "easy" по умолчанию для transition-timing-function.

Также следует упомянуть, что сейчас ведутся дискуссии по поводу замены значения по умолчанию с “all” на “none”.

Где может быть полезна данная техника?
Допустим, вы начали работу с трансформациями одного или нескольких свойств, но затем решили добавить другие в список трансформаций. Если параметры трансформации одинаковы для всех свойств (что имеет очень высокую вероятность), то будет проще использовать ключевое слово “all” в определении с самого начала, и не придется писать перечисление через запятую при дальнейшей модификации кода.

Но с одной оговоркой. Для всех свойств используются одинаковые временные функции и длительность трансформации.

Добавлено: 09 Мая 2018 11:20:11 Добавил: Андрей Ковальчук

Почему следует использовать селектор :any()

С момента выхода Firefox 4 перед нами открылось множество новых CSS селекторов. Пробежавшись по CSS селекторам, которые были включены в Firefox 4 (ну и соответственно в Webkit), я натолкнулся на селектор :any(). В этом уроке мы продемонстрируем применение данного селектора.

КАРТИНКА 1

Сразу же хочу отметить, что селектора :any() нет в CSS3 спецификации (пока что), но я уверен, что за Webkit последуют и другие браузеры. Для того, чтобы данный селектор работал в Firefox, мы будем использовать префикс -moz-:-moz-что_угодно. Давайте же взглянем на то, что можно сделать при помощи селектора :any().

Задача
Итак, пример:

/* Ссылки на сайте */
/* Уровень 0 */
a {
   color:#eee;
}
  
/* Ссылки в списках, навигации, заголовке и футере */
/* Уровень 1 */
li a, nav a, header a, footer a {
   color:#555;
}
  
/* Другие виды ссылок */
/* Уровень 2 */
section li a, section nav a, section header a, section footer a,
article li a, article nav a, article header a, article footer a,
aside li a, aside nav a, aside header a, aside footer a {
   color:#000;
}
  
/* Уровень 3 */
/* Ну в общем вы поняли… */

Вы заметили, что чем дальше мы идём, тем сложнее читать сформированные CSS правила.

Решение
Селектор :any() создан для того, чтобы сгруппировать некоторые селекторы. Итак, давайте посмотрим:
/* Ссылки на сайте */
/* Уровень 0 */
a {
   color:#eee;
}
  
/* Уровень 1 */
:any(li, nav, header, footer) a {
   color:#555;
}
 
/* Уровень 2 */
:any(section, article, aside)
:any(li, nav, header, footer) a {
   color:#000;
}
  
/* Уровень 3 */
:any(section, article, aside)
:any(li, nav, header, footer)
:any(h1, h2, h3) a {
   color:#aaa;
}

Лучше! Не правда ли?

Заключение
Как вы уже успели заметить, селектор :any() значительно увеличивает читабельность CSS кода. Особенно его удобно применять при использовании новых HTML5 тегов, таких как section, header, footer, nav, aside и т.д.

А что вы думаете по этому поводу?

Добавлено: 09 Мая 2018 11:19:10 Добавил: Андрей Ковальчук

Красивые всплывающие окна (блоки) с помощью jQuery

В сегодняшнем уроке мы рассмотрим интересный jQuery плагин по созданию всплывающих окон (блоков).

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

Плагин очень гибок и прост в установке.

Использование плагина

Прежде всего нам необходимо подключить фреймворк и файл плагина.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.meerkat.js"></script>

Далее нам необходимо инициализировать основную функцию:
<script type="text/javascript">
$(document).ready(function(){
meerkat();
});
</script>

В данном примере мы не задаем каких-либо дополнительных настроек, поэтому они будут взяты по умолчанию.

Последним шагом будет вставка Div с необходимым текстом где-либо в документе (лучше всего перед закрывающим тегом </body>). Обязательно id должно быть meerkat.
<div id="meerkat">
Meerkat Content Goes Here
</div>

Значения по умолчанию данного плагина будут такими:
meerkat({
showMeerkatOnLoad: 'false',
close: 'none',
dontShow: 'none',
dontShowExpire: 0,
removeCookie: 'none',
meerkatPosition: 'bottom',
animation: 'slide',
animationSpeed: 'slow',
height: 'auto',
background: 'none'
});

Подробнее об опциях плагина:

showMeerkatOnLoad - принимает два значения: true или false. Когда true, плагин будет показываться при вызове функции (при загрузке страницы). Когда false, плагин будет работать только при нажатии на кнопку.
По умолчанию - "false"

close - данная опция принимает любой селектор (к примеру, ".close" или "#close"). Когда пользователь нажимает на селектор, указанный в опциях, плагин будет закрыт.
По умолчанию - "none"

dontShow - данная опция принимает любой селектор (к примеру, ".dont-show" или "#dont-show"). Когда пользователь нажимает на селектор, указанный в опциях, плагин будет закрыт и не будет показан до перезагрузки браузера или до истечения определенного количества дней (зависит от dontShowExpire)
По умолчанию - "none"

dontShowExpire - если Вы задаете эту опцию, у Вас есть возможность определить длительность периода "не отображения" данного плагина. Значение может быть в интервале от 0 до 365. Кроме этого можно указать 0.5 (плагин не будет показываться 12 часов). Если укажите 3, тогда не будет работать 3 дня.
По умолчанию - "0"

removeCookie - используется для удаления Cookie, которое создается опцией dontShow. Опция removeCookie принимает любой селектор (к примеру, ".remove-cookie" или "#remove-cookie").
По умолчанию - "none"

meerkatPosition - принимает два значения top или bottom (верх или низ). Тут, я думаю, все понятно.
По умолчанию - "bottom"

animation - 2 значение - slide или fade. Можно варьировать разные типы анимации показа\скрытия плагина.
По умолчанию - "slide"

animationSpeed - скорость анимации. Принимает три значения ("slow", "normal", или "fast") или кол-во милисекунд для анимации (например, 1000).
По умолчанию - "slow"

height - возможно указать высоту блока с помощью всех возможных единиц измерения CSS (px, em, %, auto, и т.д.).
По умолчанию - "auto"

background - можно задать фоновый цвет или изображение. Пример: background: '#000 url(/path/to/bgimage.jpg) no-repeat left top'
По умолчанию - "none".

Добавлено: 09 Мая 2018 11:17:50 Добавил: Андрей Ковальчук

Фавиконки рядом со ссылками

При оформлении страниц сайта очень интересным свойством может быть автоматическая вставка фавиконки рядом со ссылкой на другие ресурсы. К сожалению, только средствами CSS сделать универсальное решение не получится, но немного jQuery помогут добиться замечательного результата.

Решение для одной ссылки
Если таким образом хочется оформлять ссылки только на один ресурс, то вполне можно обойтись только CSS. A разметке формируем ссылку:

<a href=http://ruseller.com>Ruseller</a>

А в CSS формируем для нее внешний вид:
a[href*="ruseller.com"]{
    padding-left:18px;
    background:url(http://www.google.com/s2/u/0/favicons?domain=ruseller.com) left center no-repeat;
}

Здесь используется сервис Google для фавиконок.

Универсальное решение
В выше приведенном варианте использовался сервис для получения фавиконок от Google. Ему нужно только доменное имя верхнего уровня:

http://www.google.com/s2/u/0/favicons?domain=ruseller.com


Для вытаскивания URL доменного имени можно использовать регулярное выражение:
function getDomain(url) {
   return url.match(/:\/\/(.[^/]+)/)[1];
}

А с помощью данной функции и jQuery формируется фоновое изображение с фавиконой:
$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://www.google.com/s2/u/0/favicons?domain=" + getDomain(this.href) +
        ") left center no-repeat",
        "padding-left": "18px"
    });
});

Можно также воспользоваться this.hostname вместо регулярного выражения. Но гарантированной поддержки данного варианта нет.
$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://www.google.com/s2/u/0/favicons?domain=" + this.hostname +
        ") left center no-repeat",
        "padding-left": "18px"
    });
});

Используем getFavicon
Есть еще один сервис - getFavicon. Как показала практика, он чуть-чуть медленнее. Но у него есть преимущество - можно использовать полный URL без выделения доменного имени.
$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});

Заключение
При реализации данного свойства на сайте нужно помнить о вопросе производительности. Каждое маленькое изображение потребует отдельного запроса.

У Яндекса есть сервис, который формирует спрайт из фавиконок, например:
http://favicon.yandex.net/favicon/google.com/yandex.ru/ruseller.com

Добавлено: 09 Мая 2018 11:16:07 Добавил: Андрей Ковальчук

Красивый эффект для кнопки

В сегодняшнем уроке Вы узнаете как сделать красивый эффект для кнопки или любого изображения.

Все это будет сделано с помощью нашего любимого jQuery,

Первым делом нам необходимо поместить этот код между тегами <head></head>.

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {  
  $('#rss a')   
    .append('<span class="hover" id="rsscolor"/>').each(function () {
      var $span = $('> span.hover', this).css('opacity', 0);
      $(this).hover(function () {
        $span.stop().fadeTo(800, 1);
      }, function () {
        $span.stop().fadeTo(800, 0);
      });
    });
});
</script>

Тут все стандартно - подключаем фреймворк и функцию.

Далее придаем немного стиля:
<style>
body{
background:#000;}
#rss{
width:300px;
height:225px;
margin:auto;
position:relative;
display:block;}
#rss a{
	background-image:url(rss_bw-300x225.png);
	background-repeat: no-repeat;
	position:relative;
display:block;
width:300px;
height:225px;
}
 #rss span.hover{
 width:300px;
height:225px;
 background-image:url(rss-300x225.png);
	background-repeat: no-repeat;
	position:relative;
display:block;}
</style>

И в конце вставляем таким образом само изображение:
<div id="rss"><a href="#" title="fancy rss"></a></div>

Получился довольно неплохой эффект, который при полете фантазии можно легко приделать к чему угодно!

Спасибо за внимание! Всем успехов!!!

Добавлено: 09 Мая 2018 11:13:13 Добавил: Андрей Ковальчук

Трансформации CSS в адаптивном шаблоне

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

Трансформации CSS являются отличным средством для добавления шарма вашему адаптивному дизайну сайта. Элементы, такие как текст и/или изображения, будут плавно перемещаться при изменении размера окна браузера. И хотя такие свойства шаблона часто остаются за рамками основного внимания, их легко реализовать и они выглядят существенно лучше, чем резкое "перепрыгивание" блоков текста и картинок.

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

Устанавливаем для текста следующие стили. Трансформация текста будет происходить с использованием анимации “ease-in-and-out”.

body {
    font-size:11em;
    transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
}

Выше приведенный код CSS устанавливает правила трансформации для всего. Каждый стиль, который изменяется в медиа запросах ниже будет трансформироваться в течении .5s с использованием перехода по функции “ease-in-and-out”.

Разный размер шрифта устанавливается в медиа запросах в зависимости от размера окна браузера.
@media screen and (max-width:500px) {
body {
        font-size:8em;
    }
}

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

Правила действуют и в отношении цвета и прозрачности. Ниже приведенный пример выполняет трансформацию цвета.
body {
    font-size:11em;
    color:#000;
    transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
}
  
@media screen and (max-width:500px) {
body {
        font-size:8em;
        color:#ff0000;
  }
}

Добавлено: 09 Мая 2018 11:11:50 Добавил: Андрей Ковальчук

Создание одинаковых по высоте колонок с помощью JavaScript

Данный урок покажет Вам как с помощью нескольких строк JavaScript добиться одинаковой высоты в нескольких колонках.

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

Шаг №1

HTML

<div id="left_column">
      <p>Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum
      text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.</p>
      </div>
<div id="right_column">
      <p>Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column.
      Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column. Lorum ipsum text
      to fill up the right column.</p>
      </div>

CSS
#left_column {
float: left;
width: 180px;
border: solid 1px #ccc;
padding: 10px;
margin: 0 20px 0 0;
}
#right_column {
      float: left;
      width: 180px;
      border: solid 1px #ccc;
      padding: 20px;
      }

Ключевами значениями в стилях являются толщина границы (1px) и отступ (20px), так как эти значения нам понадобятся в расчетах действительной высоты колонок.

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

Шаг №2

Давайте углубимся в наш JavaScript и проведем некоторые расчеты. Для начала мы поместим наши колонки в переменную используя getElementById для легких манипуляций:
var myLeftColumn = document.getElementById("left_column");
      var myRightColumn = document.getElementById("right_column");

Далее, мы извлекаем полную высоту каждой колонки обращаясь к свойству offsetHeight:
var myLeftHeight = myLeftColumn.offsetHeight;
      var myRightHeight = myRightColumn.offsetHeight;

Высота полученная с помощью offsetHeight - это высота части с контентом + отступы + толщина границ. Мы не можем изменить свойство offsetHeight элемента, мы можем только его узнать, что поможет нам в дальнейшем.

Шаг №3

Далее уже немного сложнее. На данном этапе мы узнаем точные значения границ, отступа, чтобы их использовать в дальнейших вычеслениях. JavaScript позволяет обратиться к значению любого CSS элемента используя объект style вот так:
var myTopBorder = myLeftColumn.style.borderTopWidth;

Однако, объект style дает нам доступ к инлайновому CSS или CSS, который задан с помощью JavaScript. Значит в примере выше переменная “myTopBorder” не будет иметь значения, так как все стили находятся в отдельном файле (таблице стилей). Для того, чтобы извлечь это значение (вне зависимости от их расположения), нам необходим кроссбраузерная функция, которая получит доступ к таблице стилей. К счастью, такое решение есть. Ниже представлен код, который мы включим в наш JavaScript файл для помощи вычесления так называемого "Рассчитанного стиля" элемента.
function retrieveComputedStyle(element, styleProperty)
      {
var computedStyle = null;
  if (typeof element.currentStyle != "undefined")
      {
      computedStyle = element.currentStyle;
      }
      else
      {
      computedStyle = document.defaultView.getComputedStyle(element, null);
      }
      return computedStyle[styleProperty];
      }

Наша функция берет 2 параметра: элемент, к которому мы обращаемся (в нашем примере это будет слой “left_column” или “right_column”), а также свойство, которое нам необходимо узнать. В данном уроке, это может быть верхний отступ. Внутри нашей функции мы объявляем местную переменную computedStyle, которая в конечном счете сохранит "возвращенное" значение.

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

Шаг №4

Далее давайте используем следующую функцию для рассчета точного количества границ и отступов обоих колонок:
var myLeftBorderTopPixels = retrieveComputedStyle(myLeftColumn, "borderTopWidth");
      var myLeftBorderBottomPixels = retrieveComputedStyle(myLeftColumn, "borderBottomWidth");
      var myLeftPaddingTopPixels = retrieveComputedStyle(myLeftColumn, "paddingTop");
      var myLeftPaddingBottomPixels = retrieveComputedStyle(myLeftColumn, "paddingBottom");
      var myRightBorderTopPixels = retrieveComputedStyle(myRightColumn, "borderTopWidth");
      var myRightBorderBottomPixels = retrieveComputedStyle(myRightColumn, "borderBottomWidth");
      var myRightPaddingTopPixels = retrieveComputedStyle(myRightColumn, "paddingTop");
      var myRightPaddingBottomPixels = retrieveComputedStyle(myRightColumn, "paddingBottom");

Выше представлены 8 разных переменых, которые отображают верхние и нижние стили для использования в рассчетах.

Шаг №5

Далее нам необходимо суммировать все дополнительные значения, чтобы вся сумма была доступна в конце кода. Но помните, что значения, с которыми мы имеем дело это CSS величины, которые в конце содержат единицу измерения. К примеру, толщина верхней границы будет не просто "1" - это будет строка (не цифра) - читай 1 пиксель “1px”. Чтобы справиться с этим нам необходимо сделать 2 вещи: 1) убрать окончание “px”; 2) преобразовать переменную в цифру, чтобы JavaScript понял, что мы хотим "добавлять и отнимать" (обычно делают с цифрами), а не объединять строки (что обычно делают со строками). ВОт код для этого:
var myLeftBorderNumber = Number(myLeftBorderTopPixels.replace("px", "")) + Number(myLeftBorderBottomPixels.replace("px", ""));
      var myLeftPaddingNumber = Number(myLeftPaddingTopPixels.replace("px", "")) + Number(myLeftPaddingBottomPixels.replace("px", ""));
      var myLeftExtras = myLeftBorderNumber + myLeftPaddingNumber;

      var myRightBorderNumber = Number(myRightBorderTopPixels.replace("px", "")) + Number(myRightBorderBottomPixels.replace("px", ""));
      var myRightPaddingNumber = Number(myRightPaddingTopPixels.replace("px", "")) + Number(myRightPaddingBottomPixels.replace("px", ""));
      var myRightExtras = myRightBorderNumber + myRightPaddingNumber;

Следует обратить внимание на переменные myLeftExtras и myRightExtras. Вы увидете далее зачем они нам.

Шаг №6

Теперь мы обращаемся к начальным переменным, в которых сохранили полную высоту каждой колонки, и мы выполняем простой тест на то, какая из них выше. Как только мы это узнаем, мы меняем высоту короткой колонки на необходимое значение.
if (myLeftHeight > myRightHeight) {
myRightColumn.style.height = (myLeftHeight - myRightExtras) + "px";
}
else {
      myLeftColumn.style.height = (myRightHeight - myLeftExtras) + "px";
      }

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

После вычислений к цифре подстанавливается окончание "px", чтобы она правильно обработалось браузерами.

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

В нашем уроке рассмотрен пример в 2-я колонками, но можно применить данный код и на трех колонках (с изменениями в коде, конечно).

Всего наилучшего Вам, уважаемые посетители нашего сайта!

Добавлено: 09 Мая 2018 10:51:53 Добавил: Андрей Ковальчук

Создание уличного билборда

Сегодня мы создадим "уличный билборд" на просторах Интернета :).

В данном уроке мы будем использовать много изображений, CSS и jQUery для создания эффекта уличного билборда с вращающимися рекламами. Идея очень проста: один набор порезанных изображений будет сменяться другим. Мы будем уменьшать ширину каждого "первого" изображения, и увеличивать ширину каждого "второго". Таким образом будет создаваться необходимый эффект.


Начнем..

HTML

У нас будет много частей одного большого изображения - по 22 части для каждой рекламы:

<div class="container">
<div class="ad">
<div id="ad_1" class="ad_1">
<img class="slice_1" src="ads/ad1_slice01.jpg"/>
<img class="slice_2" src="ads/ad1_slice02.jpg"/>
<img class="slice_3" src="ads/ad1_slice03.jpg"/>
<img class="slice_4" src="ads/ad1_slice04.jpg"/>
<img class="slice_5" src="ads/ad1_slice05.jpg"/>
<img class="slice_6" src="ads/ad1_slice06.jpg"/>
<img class="slice_7" src="ads/ad1_slice07.jpg"/>
<img class="slice_8" src="ads/ad1_slice08.jpg"/>
<img class="slice_9" src="ads/ad1_slice09.jpg"/>
<img class="slice_10" src="ads/ad1_slice10.jpg"/>
<img class="slice_11" src="ads/ad1_slice11.jpg"/>
<img class="slice_12" src="ads/ad1_slice12.jpg"/>
<img class="slice_13" src="ads/ad1_slice13.jpg"/>
<img class="slice_14" src="ads/ad1_slice14.jpg"/>
<img class="slice_15" src="ads/ad1_slice15.jpg"/>
<img class="slice_16" src="ads/ad1_slice16.jpg"/>
<img class="slice_17" src="ads/ad1_slice17.jpg"/>
<img class="slice_18" src="ads/ad1_slice18.jpg"/>
<img class="slice_19" src="ads/ad1_slice19.jpg"/>
<img class="slice_20" src="ads/ad1_slice20.jpg"/>
<img class="slice_21" src="ads/ad1_slice21.jpg"/>
<img class="slice_22" src="ads/ad1_slice22.jpg"/>
</div>
<div id="ad_2" class="ad_2">
<img class="slice_1" src="ads/ad2_slice01.jpg"/>
<img class="slice_2" src="ads/ad2_slice02.jpg"/>
<img class="slice_3" src="ads/ad2_slice03.jpg"/>
<img class="slice_4" src="ads/ad2_slice04.jpg"/>
<img class="slice_5" src="ads/ad2_slice05.jpg"/>
<img class="slice_6" src="ads/ad2_slice06.jpg"/>
<img class="slice_7" src="ads/ad2_slice07.jpg"/>
<img class="slice_8" src="ads/ad2_slice08.jpg"/>
<img class="slice_9" src="ads/ad2_slice09.jpg"/>
<img class="slice_10" src="ads/ad2_slice10.jpg"/>
<img class="slice_11" src="ads/ad2_slice11.jpg"/>
<img class="slice_12" src="ads/ad2_slice12.jpg"/>
<img class="slice_13" src="ads/ad2_slice13.jpg"/>
<img class="slice_14" src="ads/ad2_slice14.jpg"/>
<img class="slice_15" src="ads/ad2_slice15.jpg"/>
<img class="slice_16" src="ads/ad2_slice16.jpg"/>
<img class="slice_17" src="ads/ad2_slice17.jpg"/>
<img class="slice_18" src="ads/ad2_slice18.jpg"/>
<img class="slice_19" src="ads/ad2_slice19.jpg"/>
<img class="slice_20" src="ads/ad2_slice20.jpg"/>
<img class="slice_21" src="ads/ad2_slice21.jpg"/>
<img class="slice_22" src="ads/ad2_slice22.jpg"/>
</div>
</div>
</div>
<div class="billboard"></div>

Из этих изображений (22 кусочка по 35 пикселей каждый) у нас получится одно 770 пикселей на 340.

CSS

Стили для билборда:
.billboard{
position:absolute;
bottom:0px;
left:50%;
margin-left:-447px;
width:916px;
height:599px;
background:transparent url(../images/billboard.png) no-repeat 0px 0px;
}

Для позиционирования элемента в центре страницы, мы задаем значение left на 50% и left margin на негативное значение половины ширины элемента.

Контейнер для реклам будет иметь такие же стили, как и билборд, кроме фонового изображения. Мы делаем это для того, чтобы позиционировать элементы рекламы в том же месте, где и билборд. Мы не хотим размещать наши рекламы внутри билборда, так как нам необходимо, чтобы билборд был над ними. Поэтому мы используем этот трюк создавая элемент со схожим позиционированием.
.container{
position:absolute;
bottom:0px;
left:50%;
margin-left:-447px;
width:916px;
height:599px;
}
.ad{
width:800px;
height:336px;
position:relative;
margin:35px 0px 0px 60px;
background-color:#333;
}
.ad_1 img{
width:35px;
height:336px;
position:absolute;
}
.ad_2 img{
width:0px;
height:336px;
margin-left:18px;
position:absolute;
}

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

Единичные кусочки необходимо правильно позиционировать:
.slice_1{left:0px;}
.slice_2{left:36px;}
.slice_3{left:72px;}
.slice_4{left:108px;}
.slice_5{left:144px;}
.slice_6{left:180px;}
.slice_7{left:216px;}
.slice_8{left:252px;}
.slice_9{left:288px;}
.slice_10{left:324px;}
.slice_11{left:360px;}
.slice_12{left:396px;}
.slice_13{left:432px;}
.slice_14{left:468px;}
.slice_15{left:504px;}
.slice_16{left:540px;}
.slice_17{left:576px;}
.slice_18{left:612px;}
.slice_19{left:648px;}
.slice_20{left:684px;}
.slice_21{left:720px;}
.slice_22{left:756px;}

Позиционируя элементы на один пиксель левее их собственного размера, мы создаем небольшой просвет между ними. Теперь значение left margin 18 пикселей (половина кусочка + расстояние). Мы устанавливаем это, так как хотим наши кусочки появляться (или исчезать) из (или в) их центра. Если мы просто зададим ширину кусочка на 0, тогда не будет эффекта вращения.

JavaScript

Теперь мы создадим простую функцию. Она будет заставлять первые кусочки исчезнуть (менять ширину на 0). Для эффекта вращения добавляем значение left margin = 18 пикселей.

По мере исчезновения первых кусочков, мы показываем вторые убирая left margin = 18 пикселей и придавая им ширину 35 пикселей. Мы вызываем нашу функцию таким образом:
$('#ad_1 > img').each(function(i,e){
rotate($(this),500,3000,i);
});

Весь скрипт выглядит так:
$(function() {
$('#ad_1 > img').each(function(i,e){
rotate($(this),500,3000,i);
});
function rotate(elem1,speed,timeout,i){
elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
var other;
if(elem1.parent().attr('id') == 'ad_1')
other = $('#ad_2').children('img').eq(i);
else
other = $('#ad_1').children('img').eq(i);
other.animate({'marginLeft':'0px','width':'35px'},
speed,function(){
var f = function() { rotate(other,speed,timeout,i) };
setTimeout(f,timeout);
});
});
}
});

Заменив значения в строке со словом rotate (500 и 3000) можно изменить скорость анимации и задержку.

Вот и все готово! :)

Добавлено: 09 Мая 2018 10:21:50 Добавил: Андрей Ковальчук