鼠标移动时两种颜色之间的转换使用Javascript

Question

如果屏幕左侧是特定的rgb值，右侧是另一个，如何根据鼠标位置上的鼠标位置平滑过渡？

因此，当鼠标位于最左侧时，它是一种颜色，最右侧是另一种颜色。在中间它将是中途点。

类似这样的：http://jsfiddle.net/j08691/BrZjJ/ - 但基于设置的颜色，而不是任意的。

var $el = $('div'); 
 

 
var p_x, p_y, 
 
    window_width = window.innerWidth, 
 
    window_height = window.innerHeight; 
 

 
var m = { 
 
     moving_left: false, 
 
     moving_up: false, 
 
     last_x: 0, 
 
     last_y: 0, 
 
     x: 0, 
 
     y: 0 
 
    }; 
 

 
var colors = { 
 
     orange: { r: 238, g: 119, b: 0 }, 
 
     blue: { r: 40, g: 203, b: 215 } 
 
    }; 
 

 
$el.on('mousemove', function(e){ 
 
    m.x = e.pageX; 
 
    m.y = e.pageY; 
 

 
    m.moving_left = (m.x < m.last_x) ? true : false; 
 
    m.moving_up  = (m.y < m.last_y) ? true : false; 
 

 
    m.last_x = m.x; 
 
    m.last_y = m.y; 
 

 
}); 
 

 
function animateBackground() { 
 
    p_width  = m.x/window_width; 
 
    p_height = m.y/window_height; 
 

 
    p_x = p_width.toFixed(2); 
 
    p_y = p_height.toFixed(2); 
 

 
    switch(true) { 
 
     // top left 
 
     case p_x <= 0.5 && p_y <= 0.5: 
 
      fr = colors.orange.r; 
 
      fg = colors.orange.g; 
 
      fb = colors.orange.b; 
 
      break; 
 

 
     // bottom right 
 
     default: 
 
      fr = colors.blue.r; 
 
      fg = colors.blue.g; 
 
      fb = colors.blue.b; 
 
      break; 
 
    } 
 

 
    $el.css({ 
 
     backgroundColor: 'rgb('+fr+', '+fg+', '+fb+')' 
 
    }); 
 

 
    requestAnimationFrame(animateBackground); 
 

 
} 
 

 
requestAnimationFrame(animateBackground);

https://jsfiddle.net/o32juay5/

我使用类似上述的东西，

（除使用在四角4种颜色，但为了简单起见...）。我只是不能在我的脑海中工作如何在两种颜色之间切换...

任何想法？

谢谢。

Answer 1

您需要根据鼠标位置以数学方式计算颜色。

对于R，G，B值中的每一个：取两种颜色的值，确定它们之间的范围，根据鼠标位置在该范围内选择一个位置，并将它们组合成一个background-color用于CSS。

https://jsfiddle.net/kbpyxxcn/6/

如果要使用此方法四种颜色，你的计算将变得更加复杂，除非你也可以定义为中心的颜色。

Answer 2

添加CSS属性transition和它的作品：

https://jsfiddle.net/o32juay5/2/

div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    -ms-transition: background-color 1s; 
    -webkit-transition: background-color 1s; 
    transition: background-color 1s; 
} 

如果你用JavaScript性能将低于这个CSS属性做到这一点。