Вложенные слои

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

Вот также и браузер, при загрузке страницы, автоматически раскладывает элементы на слои. При необходимости программист или дизайнер могут изменить стандартные правила размещения, указав явно значение z-index в стиле элемента. Рассмотрим пример:
Для начала укажем необходимые нам стили.
Теперь добавим HTML-код:
 

 <div id="block1">текст</div>
  <div id="block2">текст</div>
  <div id="block3">текст</div>

А теперь самое интересное — немного оживим страницу:

<script type="text/javascript" language="javascript">
 	var myCounter = 0
 	function rand(){
     	return (Math.random() * 100000).toFixed();
		} 	 	

		function runMultiple() 	{
			// перебираем в цикле все div'ы
 		for(i = 1; i <= 3; i++)
 		{
 		var cntDiv = document.getElementById("block" + i.toFixed());
 			if(cntDiv)
 			{
				// изменяем счётчик
 			cntDiv.innerHTML = myCounter;
				// меняем z-index на случайную величину
				// от нуля до 100000
 				cntDiv.style.zIndex = rand();
 			}
 		}
 		myCounter++;
 	}
		// запускаем ежесекундное изменение порядка слоёв
		var timerMulti = window.setInterval("runMultiple();", 1000);
</script>

Пример работы можно посмотреть здесь.

Рубрика: Слои

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

Вам надо войти, чтобы написать комментарий.