Вводить в форме текста стоимость свойства css в div я предназначаю

Привет я нуждаюсь в том, чтобы получить какой-то способ, чтобы вводить стоимость свойства css такой "цвет" как текст внутри div#consola для каждого 3 div:

  • #position
  • #position2
  • #position3

в классах p1color, p2color, p3color соответственно по мере того, как стоимость меняется, когда он продвигается в бруске scroll.

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if ( scroll > 0 && scroll < 1000) {
		$('.position').css({
'color':'rgba(0,255,65,1.00))',
'background':'rgba(0,40,90,1.00)'
			})
		$('.position2').css({
'color':'rgba(255,248,0,1.00)',
			})
		$('.position3').css({
'color':'rgba(255,0,215,1.00)',
			})
		}
   if ( scroll > 1000 && scroll < 2000) {
		$('.position').css({
'color':'rgba(255,242,0,1.00)',
'background':'rgba(255,0,144,1.00)'
			})
		$('.position2').css({
'color':'rgba(0,100,206,1.00)',
			})
		$('.position3').css({
'color':'rgba(0,255,7,1.00)',
			})
		}
   if ( scroll > 2000 && scroll < 3000) {
		$('.position').css({
'color':'rgba(0,94,255,1.00)',
'background':'rgba(255,0,226,1.00)'
			})
		$('.position2').css({
'color':'rgba(155,0,255,1.00)',
			})
		$('.position3').css({
'color':'rgba(224,224,224,1.00)',
			})
		}
	
    if ( scroll > 3000 && scroll < 4000) {
		$('.position').css({
'color':'rgba(255,2,6,1.00)',
'background':'rgba(255,2,6,1.00)'
			})
		$('.position2').css({
'color':'rgba(69,66,179,1.00)',
			})
		$('.position3').css({
'color':'rgba(124,141,245,1.0)',
			})
		}
    if ( scroll > 4000 && scroll < 5000) {
		$('.position').css({
'color':'rgba(0,94,255,1.00)',
'background':'rgba(255,0,226,1.00)'
			})
		$('.position2').css({
'color':'rgba(224,224,224,1.00)',
			})
		$('.position3').css({
'color':'rgba(155,0,255,1.00)',
			})
		}
	if ( scroll > 5000 && scroll < 6000) {
		$('.position').css({
'color':'rgba(211,104,0,1.0)',
'background':'rgba(255,238,0,1.00)',
'text-shadow':'none'
			})
		$('.position2').css({
'color':'rgba(176,50,0,1.0)',
			})
		$('.position3').css({
'color':'rgba(100,16,5,1.00)',
			})
		}
	if ( scroll > 5000 && scroll < 6000) {
		$('.position').css({
'color':'rgba(196,173,217,1.00)',
'background':'rgba(243,255,217,1.00)',
			})
		$('.position2').css({
'color':'rgba(136,168,191,1.0)',
			})
		$('.position3').css({
'color':'rgba(68,47,168,1.0)',
			})
		}
		});
body{text-align:center;height:10000px;}
.position{
color:blue;

 display:inline;
  margin-top:5px;
  position:fixed;
}
.position2{
color:grey;

  display:inline;
   margin-top:25px;
  position:fixed;
}
.position3{
color:green;

  display:inline;
   margin-top:45px;
  position:fixed;
}
#consola{
   background:grey;
  display:inline;
   margin-top:65px;
  position:fixed;
  width:300px;
  height:100px;
  margin-left:-150px;
}
.p1color{
 background:red;
}
.p2color{
 background:green;
}
.p3color{
 background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position">
  AAAA
  </div>
<div class="position2">
  BBBBB
  </div>
<div class="position3">
  CCCC
  </div>

<div id="consola">
  <div class="p1color">
    B
    </div>
  <div class="p2color">
    C
    </div>
  <div class="p3color">
    D
    </div>
  </div>
2
задан 15.04.2016, 19:52
1 ответ

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

Если это - то, что ты хочешь, у него нет никакой тайны: Только ты был бы должен читать признак цвет используя метод .css(atributo) и распределять это ему в div корреспондент используя .text(valor). Проблема этого решения состоит в том, что jQuery он интерпретирует стоимость свойства и показывает тебе эквивалентную стоимость (в rgb), что не точно, что у тебя было сочинение в твоей части кода (в rgba).

Нечто похожее:

$(".p1color").text($(".position").css("color"));
$(".p2color").text($(".position2").css("color"));
$(".p3color").text($(".position3").css("color"));

Только ты был бы должен добавлять этот текст в конце твоей функции и уже он был бы сделанным:

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();
  if ( scroll > 0 && scroll < 1000) {
    $('.position').css({
      'color':'rgba(0,255,65,1.00))',
      'background':'rgba(0,40,90,1.00)'
    })
    $('.position2').css({
      'color':'rgba(255,248,0,1.00)',
    })
    $('.position3').css({
      'color':'rgba(255,0,215,1.00)',
    })
  }
  if ( scroll > 1000 && scroll < 2000) {
    $('.position').css({
      'color':'rgba(255,242,0,1.00)',
      'background':'rgba(255,0,144,1.00)'
    })
    $('.position2').css({
      'color':'rgba(0,100,206,1.00)',
    })
    $('.position3').css({
      'color':'rgba(0,255,7,1.00)',
    })
  }
  if ( scroll > 2000 && scroll < 3000) {
    $('.position').css({
      'color':'rgba(0,94,255,1.00)',
      'background':'rgba(255,0,226,1.00)'
    })
    $('.position2').css({
      'color':'rgba(155,0,255,1.00)',
    })
    $('.position3').css({
      'color':'rgba(224,224,224,1.00)',
    })
  }

  if ( scroll > 3000 && scroll < 4000) {
    $('.position').css({
      'color':'rgba(255,2,6,1.00)',
      'background':'rgba(255,2,6,1.00)'
    })
    $('.position2').css({
      'color':'rgba(69,66,179,1.00)',
    })
    $('.position3').css({
      'color':'rgba(124,141,245,1.0)',
    })
  }
  if ( scroll > 4000 && scroll < 5000) {
    $('.position').css({
      'color':'rgba(0,94,255,1.00)',
      'background':'rgba(255,0,226,1.00)'
    })
    $('.position2').css({
      'color':'rgba(224,224,224,1.00)',
    })
    $('.position3').css({
      'color':'rgba(155,0,255,1.00)',
    })
  }
  if ( scroll > 5000 && scroll < 6000) {
    $('.position').css({
      'color':'rgba(211,104,0,1.0)',
      'background':'rgba(255,238,0,1.00)',
      'text-shadow':'none'
    })
    $('.position2').css({
      'color':'rgba(176,50,0,1.0)',
    })
    $('.position3').css({
      'color':'rgba(100,16,5,1.00)',
    })
  }
  if ( scroll > 5000 && scroll < 6000) {
    $('.position').css({
      'color':'rgba(196,173,217,1.00)',
      'background':'rgba(243,255,217,1.00)',
    })
    $('.position2').css({
      'color':'rgba(136,168,191,1.0)',
    })
    $('.position3').css({
      'color':'rgba(68,47,168,1.0)',
    })
  }

  $(".p1color").text($(".position").css("color"));
  $(".p2color").text($(".position2").css("color"));
  $(".p3color").text($(".position3").css("color"));
});
body{
  text-align:center;
  height:10000px;
}
.position{
  color:blue;
  display:inline;
  margin-top:5px;
  position:fixed;
}
.position2{
  color:grey;
  display:inline;
  margin-top:25px;
  position:fixed;
}
.position3{
  color:green;
  display:inline;
  margin-top:45px;
  position:fixed;
}
#consola{
  background:grey;
  display:inline;
  margin-top:65px;
  position:fixed;
  width:300px;
  height:100px;
  margin-left:-150px;
}
.p1color{
  background:red;
}
.p2color{
  background:green;
}
.p3color{
  background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position">
  AAAA
</div>
<div class="position2">
  BBBBB
</div>
<div class="position3">
  CCCC
</div>

<div id="consola">
  <div class="p1color">
    B
  </div>
  <div class="p2color">
    C
  </div>
  <div class="p3color">
    D
  </div>
</div>
1
ответ дан 24.11.2019, 14:35

Теги

Похожие вопросы