我在jsfiddle上发现了这个很棒的代码，用于使用jQuery和Color插件在两个颜色之间淡出。 我想要做的是能够在页面上向下滚动三种或更多颜色。 我曾经尝试过（悲惨地失败）自己编辑代码但是对JS和jQuery来说太新了。 请帮忙吗？
（文档）$。就绪（函数（）{
//** notice we are including jquery and the color plugin at
//** http://code.jquery.com/color/jquery.color-2.1.0.js
var scroll_pos = 0;
var animation_begin_pos = 0; //where you want the animation to begin
var animation_end_pos = 1000; //where you want the animation to stop
var beginning_color = new $.Color( 'rgb(210,50,98)' ); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here.
var ending_color = new $.Color( 'rgb(0,197,209)' ); ;//what color we want to use in the end
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) {
// console.log( 'scrolling and animating' );
//we want to calculate the relevant transitional rgb value
var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
var newColor = new $.Color( newRed, newGreen, newBlue );
//console.log( newColor.red(), newColor.green(), newColor.blue() );
$('body').animate({ backgroundColor: newColor }, 0);
} else if ( scroll_pos > animation_end_pos ) {
$('body').animate({ backgroundColor: ending_color }, 0);
} else if ( scroll_pos < animation_begin_pos ) {
$('body').animate({ backgroundColor: beginning_color }, 0);
} else { }
});
}）;
答案 0 :(得分：0)
试试这个。它与原始代码的想法相同，但有一些小的补充。如果您想要使用Javascript练习，可以尝试使用相同的想法使用一组起始位置，结束位置和起始颜色来为n种颜色执行此操作。 （还有更好的实施）
$(document).ready(function(){
//** notice we are including jquery and the color plugin at
//** http://code.jquery.com/color/jquery.color-2.1.0.js
var body_end = $(document).height() / ;
var animation_begin_pos = 0; //where you want the animation to begin
var animation_middle_pos = body_end / 3;
var animation_end_pos = body_end / (3/2); //where you want the animation to stop
var beginning_color = new $.Color( 'rgb(210,50,98)' ); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here.
var middle_color = new $.Color('rgb(255,0,0)');
var ending_color = new $.Color( 'rgb(0,197,209)' ); ;//what color we want to use in the end
/* */
function getPercentScrolled(scroll_pos, beginning_pos, end_pos){
return (scroll_pos - beginning_pos) / (end_pos - beginning_pos);
}
function getNewRGB(start_color, end_color, percentScrolled){
var newRed = start_color.red() + ( ( end_color.red() - start_color.red() ) * percentScrolled );
var newGreen = start_color.green() + ( ( end_color.green() - start_color.green() ) * percentScrolled );
var newBlue = start_color.blue() + ( ( end_color.blue() - start_color.blue() ) * percentScrolled );
console.log(newRed, newGreen, newBlue);
console.log(percentScrolled);
newRed = ((newRed > 0.0) ? newRed : 0.0);
newGreen = ((newGreen > 0.0) ? newGreen : 0.0);
newBlue = ((newBlue > 0.0) ? newBlue : 0.0);
return {red: newRed, green: newGreen, blue: newBlue};
}
$(document).scroll(function() {
var scroll_pos = $(this).scrollTop();
if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_middle_pos ) {
//we want to calculate the relevant transitional rgb value
var percentScrolled = getPercentScrolled(scroll_pos, animation_begin_pos, animation_end_pos);
var updatedColor = getNewRGB(beginning_color, middle_color, percentScrolled);
var newColor = new $.Color( updatedColor['red'], updatedColor['green'], updatedColor['blue'] );
$('body').animate({ backgroundColor: newColor }, 0);
}
else if ( scroll_pos >= animation_middle_pos && scroll_pos < animation_end_pos) {
percentScrolled = getPercentScrolled(scroll_pos, animation_middle_pos, animation_end_pos);
updatedColor = getNewRGB(middle_color, ending_color, percentScrolled);
newColor = new $.Color( updatedColor['red'], updatedColor['green'], updatedColor['blue'] );
$('body').animate({ backgroundColor: newColor }, 0);
}
else if ( scroll_pos > animation_middle_pos ) {
$('body').animate({ backgroundColor: ending_color }, 0);
}
else if ( scroll_pos < animation_begin_pos ) {
$('body').animate({ backgroundColor: beginning_color }, 0);
}
});
});
答案 1 :(得分：0)
与Sterling的答案类似，我的第一次尝试是为第三种颜色插入另一个检查点。正如Sterling的解决方案一样，这个过程开始促成子功能的必要性。 请在此处查看：http://jsfiddle.net/5uU6y/1/
一个更好，更完整的解决方案，你可以声明多种颜色，可以通过创建一个存储开始，结束和颜色值的数组来实现，你可以在滚动窗口时检查它们。
以下是该解决方案（请参阅此处的操作：http://codepen.io/cgspicer/pen/tomvq/）
$(document).ready(function(){
/**
requires http://code.jquery.com/color/jquery.color-2.1.0.js
*/
var colorsNPoints = [
{ 'begin' : 0, 'end': 100, 'color': 'rgb(220,20,60)' },
{ 'begin' : 100, 'end': 110, 'color': 'rgb(0,0,0)' },
{ 'begin' : 110, 'end': 210, 'color': 'rgb(50,205,50)' },
{ 'begin' : 210, 'end': 310, 'color': 'rgb(255,215,0)' },
{ 'begin' : 310, 'end': 410, 'color': 'rgb(220,20,60)' },
{ 'begin' : 410, 'end': 420, 'color': 'rgb(0,0,0)' },
{ 'begin' : 420, 'end': 520, 'color': 'rgb(50,205,50)' },
{ 'begin' : 520, 'end': 620, 'color': 'rgb(255,215,0)' },
{ 'begin' : 620, 'end': 720, 'color': 'rgb(220,20,60)' },
{ 'begin' : 720, 'end': 730, 'color': 'rgb(0,0,0)' },
{ 'begin' : 730, 'end': 830, 'color': 'rgb(50,205,50)' },
{ 'begin' : 830, 'end': 930, 'color': 'rgb(255,215,0)' }
];
$(document).scroll(function() {
var scrollPosition = $(this).scrollTop();
var currentRange = checkRange( scrollPosition, colorsNPoints );
if ( currentRange !== undefined ) {
console.log( currentRange );
var newColor = recalcColor( currentRange.prevColor, currentRange.nextColor, currentRange.progress );
$('body').css({ backgroundColor: newColor }, 0);
} else {
// do nothing, we're not within any ranges
}
});
// sub-functions
/**
* checks which, if any, of the scroll ranges the window is currently on
* returns an object containing necessary values
*/
function checkRange( yValue, rangesObj ) {
// loop over the object containing our ranges
for ( var i=0; i < rangesObj.length; i++ ) {
var rangeToCheck = rangesObj[i];
// check to see if we are within said range
if ( yValue >= rangeToCheck.begin && yValue <= rangeToCheck.end ) {
// set up a new object for refinement and return
var currentRangeObj = {};
currentRangeObj.prevColor = rangesObj[i-1] ? rangesObj[i-1].color : rangeToCheck.color; // store old color, falls back to range's color if no previous color exists
currentRangeObj.nextColor = rangeToCheck.color; // store new color
currentRangeObj.progress = calcPercentScrolled( rangeToCheck.begin, rangeToCheck.end, yValue ); //calculate the progress within the current range
return currentRangeObj;
} else {
}
}
}
/**
* calculates current percent scrolled
**/
function calcPercentScrolled( begin, end, current ) {
return (current - begin) / ( end - begin );
}
/**
* calculates new color
**/
function recalcColor( begin, end, factor ) {
var begin = $.Color( begin ),
end = $.Color( end );
var newRed = begin.red() + ( ( end.red() - begin.red() ) * factor );
var newGreen = begin.green() + ( ( end.green() - begin.green() ) * factor );
var newBlue = begin.blue() + ( ( end.blue() - begin.blue() ) * factor );
return $.Color( newRed, newGreen, newBlue );
}
});
希望这有帮助！