動態改變顏色形式的燈光到黑暗

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

function color(r,g,b){ 
 
    return 'rgb('+r+','+g+','+b+')'; 
 
} 
 
     \t 
 
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))); 
 
};

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

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

Answer 2

(i + 10) =>循環迭代從開始到結束。扭轉訂單，使用.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

中庸之道變化+與-：

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

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

Answer 4

嘗試使用它作爲：

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))); 
};