Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2016, 10:55
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Перебираем цвета радуги на jQuery
Добрый день уважаемые. Вот возник интерес сделать бесконечный цыкл перебора цветовой палитры радуги в 3-х блоках.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Three balls</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
	<style type="text/css">
		#field {
		position: relative;
		width: 400px;
		height: 400px;
		margin-left: 10%;
		margin-top: 10%;
		border: 5px solid black;
}

.block {
	
		width: 100%;
		height: 33.33%;
		border: 1px solid black;
}
	</style>

<body>
	<div id="field">
		<div  class="block"></div>
		<div  class="block"></div>
		<div  class="block"></div>
	</div>
<script type="text/javascript">
	window.onload = function () {

		console.log('VSE GOOD');

		var $field = $('#field'),
			$block = $('.block'),
			len =$('#field >div').length;	


				setInterval(Rainbow, 100);

				function Rainbow(){

						for (var i = 0; i < 255; i++) {

						var center = 128;
						var width = 127;
						var frequency = Math.PI * 2 / len;

						var rValue = Math.sin(frequency * i + 2) * width + center;
						var gValue = Math.sin(frequency * i) * width + center;
						var bValue = Math.sin(frequency * i + 4) * width + center;

						var r = Math.floor(rValue),
							g = Math.floor(gValue),
							b = Math.floor(bValue);

						$field.eq(i).css({
								backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")",
								
						});	

						console.log( i + "=i");
						}
				}

}
</script>
</body>
</html>

Эффект перехода цвета радуги должен происходить от верхнего блока к нижнему. При этом цветовая "нассыщеность" каждого блока должна немного отличаться, что б оно хорошо смотрелась (Иначе говоря что б одно и тоже время во всех 3-х блоках не было одного и того же цвета). Подскажите, пожалуйста, как такое сделать ?
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2016, 17:36
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Подскажите, пожалуйста, где я допускаю ошибку ?
https://jsfiddle.net/rxpjby7n/
Почему у меня не происходит "задержки на цвете". Почему сразу отбрасывает на фиолетовый ?
Я хочу что б было так :
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2016, 19:11
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Black_Star,
Потому что с интервалом 100 мс ты запускаешь функцию Rainbow(), в которой прокручиваешь сразу все цвета
Вынеси определение i из функции, убери цикл по i, внутри функции наращивай i c проверкой i<255

Последний раз редактировалось Dilettante_Pro, 10.11.2016 в 19:16.
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2016, 19:46
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Dilettante_Pro, спасибо, за совет.
Оно теперь у меня хоть моргает
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rainbow</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style>#field {
		position: relative;
		width: 400px;
		height: 400px;
		margin-left: 10%;
		margin-top: 10%;
		border: 5px solid black;
}

.block {
	
		width: 100%;
		height: 33.33%;
		border: 1px solid black;
}
</style>

<body>
	<div id="field">
		<div  class="block"></div>
		<div  class="block"></div>
		<div  class="block"></div>
	</div>
<script type="text/javascript">
window.onload = function () {

		console.log('Everything GOOD');

		var $field = $('#field'),
			$block = $('.block'),
			len =$('#field >div').length;	
		var center = 128;
		var width = 127;
		var frequency = Math.PI * 2 / len;

        var i = 0;


		setInterval(Rainbow, 100);
				function Rainbow(){

						if ( i < 255 ) {

						var rValue = Math.sin(frequency * i + 2) * width + center;
						var gValue = Math.sin(frequency * i) * width + center;
						var bValue = Math.sin(frequency * i + 4) * width + center;

						var r = Math.floor(rValue),
							g = Math.floor(gValue),
							b = Math.floor(bValue);
						
						$block.eq(0).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});	
						$block.eq(1).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});	
						$block.eq(2).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});	
						
						
						i++
						if (i==254) {
							i=1
							return i
						}
						console.log( "i=" + i);

						}
				}

}
</script>
</body>
</html>

Осталось понять почему оно отображает только 3 цвета. Это при том что rgb праметры каждую иттерацию разные Подскажите, пожалуйста, как сделать всю палитру

Последний раз редактировалось Black_Star, 10.11.2016 в 20:07.
Ответить с цитированием
  #5 (permalink)  
Старый 14.11.2016, 19:37
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Помогите остановить цикл Я хочу что б по парному нажатию мой цикл перебора цветов спектра останавливался. Мне кажется, что бесконечные циклы это не хорошо для производительности.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rainbow</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
	<style type="text/css">
		#field {
		position: relative;
		width: 400px;
		height: 400px;
		margin-left: 10%;
		margin-top: 10%;
		border: 5px solid black;
}

.block {
	
		width: 100%;
		height: 33.33%;
		border: 1px solid black;
}

.block:nth-child(1) {
	background-color: red;
}
.block:nth-child(2) {
	background-color: green;
}
.block:nth-child(3) {
	background-color: blue;
}
	</style>
</head>


<body>
	<div id="field">
		<div  class="block"></div>
		<div  class="block"></div>
		<div  class="block"></div>
	</div>

	<input id="buttonPush" type="button" value="Colorize">
<script type="text/javascript">
	window.onload = function () {

		console.log('Everything GOOD');

		var $field = $('#field'),
			$block = $('.block'),
			$colorize = $('.colorize'),

			len =$('#field >div').length,
			button=$('#buttonPush');

		var center = 128;
		var width = 127;
		var frequency = Math.PI * 2 / 256;
        var i = 0;


        button.on('click', function(){

        	$block.toggleClass('colorize');
        	// console.log('button pushed');

	if($('.block').hasClass('colorize')){

        	Rainbow();
        	setInterval(Rainbow, 50);

	} else{    		i=0;

						$('.block').eq(0).css({backgroundColor: "red"});	
						$('.block').eq(1).css({backgroundColor: "green"});	
						$('.block').eq(2).css({backgroundColor: "blue"});
					
				}

        });

				function Rainbow(){

						if ( i < 255 ) {

						var r = Math.floor(Math.sin(frequency * i + 2) * width + center);
						var g =Math.floor( Math.sin(frequency * i) * width + center);
						var b = Math.floor(Math.sin(frequency * i + 4) * width + center);

					  	

						$('.colorize').eq(0).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1+ ")"});	
						$('.colorize').eq(1).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.8 + ")"});	
						$('.colorize').eq(2).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.6 + ")"});	

					    // $block.eq(0).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1+ ")"});	
						// $block.eq(1).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.8 + ")"});	
						// $block.eq(2).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.6 + ")"});	

						i++
						if (i==255) {
							i=1
							return i
						}
						console.log( "i=" + i);

						}
	

					}


}

</script>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 15.11.2016, 12:48
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Можете покликать
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Rainbow</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style>#field {
		position: relative;
		width: 400px;
		height: 400px;
		margin-left: 10%;
		margin-top: 10%;
		border: 5px solid black;
}

.block {
	
		width: 100%;
		height: 33.33%;
		border: 1px solid black;
}
</style>

<body>
	<div id="field">
		<div  class="block"></div>
		<div  class="block"></div>
		<div  class="block"></div>
	</div>
<script type="text/javascript">
    window.onload = function () {

        var $block = $('.block'),
            width = 255,
            i = 0,
            step,
            rValue,
            gValue,
            bValue,
            startShow;

        window.onclick = function () {
            if (startShow) { clearInterval(startShow); startShow = null }
            else startShow = setInterval(Rainbow, 50);
        }
        function Rainbow() {
            if (i < 255) {
                step = 2 * Math.PI * i / 255;
                if (Math.sin(step) > 0) rValue = Math.sin(step) * width;
                else rValue = 0;
                if (Math.sin(step + Math.PI / 2) > 0) gValue = Math.sin(step + Math.PI / 2) * width;
                else gValue = 0;
                if (Math.sin(step + Math.PI) > 0) bValue = Math.sin(step + Math.PI) * width;
                else bValue = 0;

                var r = Math.floor(rValue),
							g = Math.floor(gValue),
							b = Math.floor(bValue);

                $block.eq(0).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1 + ")" });
                $block.eq(1).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.7 + ")" });
                $block.eq(2).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")" });
                i++;
            } else i = 0;
        }

    }
</script>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 15.11.2016, 14:55
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Dilettante_Pro, спасибо. Интересный подход в решении данного вопроса
Ответить с цитированием
  #8 (permalink)  
Старый 15.11.2016, 15:21
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

вариант ближе к вашему
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Rainbow</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style>#field {
		position: relative;
		width: 400px;
		height: 400px;
		margin-left: 10%;
		margin-top: 10%;
		border: 5px solid black;
}

.block {
	
		width: 100%;
		height: 33.33%;
		border: 1px solid black;
}
</style>

<body>
	<div id="field">
		<div  class="block"></div>
		<div  class="block"></div>
		<div  class="block"></div>
	</div>
<script type="text/javascript">
    window.onload = function () {

        var $block = $('.block'),
            width = 123,
            center = 123,
            i = 0,
            step,
            rValue,
            gValue,
            bValue,
            startShow;

        window.onclick = function () {
            if (startShow) { clearInterval(startShow); startShow = null }
            else startShow = setInterval(Rainbow, 50);
        }
        function Rainbow() {
            if (i < 360) {
                step = 2 * Math.PI * i / 360;
                 rValue = Math.sin(step) * width + center;
                 gValue = Math.sin(step + Math.PI / 2) * width + center;
                 bValue = Math.sin(step + Math.PI) * width + center;

                var r = Math.floor(rValue),
					g = Math.floor(gValue),
					b = Math.floor(bValue);

                $block.eq(0).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1 + ")" });
                $block.eq(1).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.7 + ")" });
                $block.eq(2).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")" });
                i++;
            } else i = 0;
        }

    }
</script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 15.11.2016, 23:31
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Ещё раз спасибо.
Это помогло мне сделать вот это)
http://codepen.io/BlackStar1991/pen/KNMEwG?editors=1010
Ответить с цитированием
  #10 (permalink)  
Старый 15.11.2016, 23:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Black_Star,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамический подсчет в таблице muraig jQuery 5 11.10.2014 16:54
хочу инвайт на хабр macdack Оффтопик 45 28.07.2013 23:18
Несколько версий JQuery UI на одной странице. Casufi jQuery 2 10.11.2012 15:24
Вопрос поддержки старых методов jQuery antonM jQuery 1 04.10.2012 00:08
jQuery Изменение цвета дочерних элементов libinstyle Общие вопросы Javascript 2 24.03.2010 04:46