动态地将颜色从浅色变为暗色

Question

我有一个功能，目前将一系列div从暗变为较亮，但我想将其反转，使其从浅到深。

如果有人可以帮助我会很棒。感谢

function color(r,g,b){
 return 'rgb('+r+','+g+','+b+')';
}

for (var i=-10; i < $('#lazyload:eq(0) .scroll-section').length/2 ; i++) {
     var r = 198;
     var g = 198;
     var b = 198;
    $('#lazyload:eq(0) .scroll-section:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+(i*10)) );
};

https://jsfiddle.net/rn3yfp9o/2/

Answer 1

Juste使用+更改-：

color(r-(i*10),g-(i*10),b-(i*10)) 
-------^--------^--------^

https://jsfiddle.net/rn3yfp9o/4/

Answer 2

(i + 10) =＆gt;循环从头到尾迭代。要反转订单，请将.scroll-section长度用作len - (i + 10)。

$('#lazyload:eq(0) .scroll-section:eq('+(len - i - 10)+')').css('background' , color(r+(i*10),g+(i*10),b+(i*10)) );

检查fiddle

Answer 3

尝试将其用作：

function color(r,g,b){
  return 'rgb('+r+','+g+','+b+')';
 }

for (var i=$('#lazyload:eq(0) .scroll-section').length/2; i >=-10  ; i--) {
       var r = 198;
       var g = 198;
       var b = 198;
  $('#lazyload:eq(0) .scroll-section:eq('+(i-10)+')').css('background' , color(r-(i*10),g-(i*10),b-(i*10)) );
 };

Answer 4

＆＃13;

＆＃13;

function color(r,g,b){  
  return 'rgb('+r+','+g+','+b+')';
}
        	
for (var i=0; i < $('#lazyload:eq(0) .scroll-section').length ; i++) {
  var r = 255;
  var g = 255;
  var b = 255;
  $('#lazyload:eq(0) .scroll-section:eq('+i+')').css('background' , color(r-(i*10),g-(i*10),b-(i*10)) );
};

＆＃13;

#lazyload{
  display: block;
  height: 100px;
  width: 100%;
}
.scroll-section{
  width: 5%;
  height: 100%;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lazyload">
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    		<div class="scroll-section"></div>
    	</div>

＆＃13;

＆＃13;

＆＃13;