Question

如果屏幕的左半部分是特定的rgb值，而右边是另一个，那么在mousemove上这两个之间如何平滑过渡取决于鼠标位置？

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

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

＆＃13;

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

＆＃13;

https://jsfiddle.net/o32juay5/

我使用类似于上面的东西，（除了在四个角上使用4种颜色，但为了简单起见......）。我无法在脑海中解决如何在两种颜色之间转换......

有什么想法吗？

感谢。

Answer 1

添加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属性。

Answer 2

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

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

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

如果您想将此方法与四种颜色一起使用，您的计算将变得更加复杂，除非您还为中心定义颜色。

使用Javascript移动鼠标时两种颜色之间的过渡

2 个答案: