Показать сообщение отдельно
  #7 (permalink)  
Старый 05.02.2017, 16:45
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Black_Star,
Зачем все эти танцы с атрибутами data? Начальное состояние блоков известно же, для остальных двух параметров явно прослеживается зависимость блока от индекса. Да и конверторы никакие не нужны.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<style>
		.first_st1{
			fill: hsl(1, 50%, 50%);
		}
		.first_st2{
			fill: hsl(1, 70%, 40%);
		}
		.first_st3{
			fill: hsl(1, 90%, 30%);
		}

		.second_st1{
			fill: hsl(11, 50%, 50%);
		}
		.second_st2{
			fill: hsl(11, 70%, 40%);
		}
		.second_st3{
			fill: hsl(11, 90%, 30%);
		}
	</style>
</head>
<body>
	<svg width="600" height="240">
		<rect class="first_st1" width="80" height="80" x="0" y="0"></rect>
		<rect class="first_st2" width="80" height="80" x="0" y="80"></rect>
		<rect class="first_st3" width="80" height="80" x="0" y="160"></rect>

		<rect class="second_st1" width="80" height="80" x="160" y="0"></rect>
		<rect class="second_st2" width="80" height="80" x="160" y="80"></rect>
		<rect class="second_st3" width="80" height="80" x="160" y="160"></rect>
	</svg>
<script>

window.onload = function(){

	var initialH1 = 1
		initialH2 = 11,	
		allFirstColors = $("[class^='first_st']"),
		firstColorsLength = allFirstColors.length,
		allSecondColors = $("[class^='second_st']"),
		secondColorsLength = allFirstColors.length;
		
	window.setInterval(function(){

		initialH1 = initialH1 === 360 ? 1 : initialH1 + 10 < 360 ? initialH1 + 10 : 360;
		initialH2 = initialH2 === 360 ? 11 : initialH2 + 10 < 360 ? initialH2 + 10 : 360;
		
		allFirstColors.each(function(i){
			$(this).css("fill", `hsl(${initialH1}, ${50 + i * 20}%, ${50 - i * 10}%)`); 
		})
		
		allSecondColors.each(function(i){
			$(this).css("fill", `hsl(${initialH2}, ${50 + i * 20}%, ${50 - i * 10}%)`); 
		})
		
	}, 200)	
}
</script>
</body>
</html>

Последний раз редактировалось destus, 05.02.2017 в 16:47.
Ответить с цитированием