Question

当我在文档中移动鼠标时，我正在尝试使用不同颜色的3个方块进行更改。这不是这样的，所以任何帮助都会受到赞赏。

$(document).ready(function() {
    $(document).mousemove(function () {
        var r1 = Math.round(e.pageX/w * 255);
        var g1 = Math.round(e.pageY/h * 255);
        var b1 = 180;
        var r2 = Math.round(e.pageX/w * 255);
        var g2 = Math.round(e.pageY/h * 255);
        var b2 = 100;
        var r3 = Math.round(e.pageX/w * 255);
        var g3 = Math.round(e.pageY/h * 255);
        var b3 = 20;
        $('.square1').css('background-color','rgb(' + r1 + ',' + g1 + ',' + b1 +')');
        $('.square2').css('background-color','rgb(' + r2 + ',' + g2 + ',' + b2 +')');
        $('.square3').css('background-color','rgb(' + r3 + ',' + g3 + ',' + b3 +')');
    });
});

Answer 1

看起来您缺少w和h变量的定义（除非您忘记将其添加到问题中）。在下面的示例中，我将w和h变量设置为窗口宽度和高度。

var $win = $(window),
    w = 0,h = 0,
    rgb = [],
    getWidth = function() {
        w = $win.width();
        h = $win.height();
    };

$win.resize(getWidth).mousemove(function(e) {

    rgb1 = [
        Math.round(e.pageX/w * 255),
        Math.round(e.pageY/h * 255),
        180
    ];
    rgb2 = [
        Math.round(e.pageX/w * 255),
        Math.round(e.pageY/h * 255),
        100
    ];
    rgb3 = [
        Math.round(e.pageX/w * 255),
        Math.round(e.pageY/h * 255),
        20
    ];

    $(".square1").css('background','rgb('+rgb1.join(',')+')');
    $(".square2").css('background','rgb('+rgb2.join(',')+')');
    $(".square3").css('background','rgb('+rgb3.join(',')+')');

}).resize();

我使用数组作为rgb值。如果您需要进一步解释，请告诉我。

请在此处查看：http://jsfiddle.net/x0r6vznt/

jquery .mousemove不工作

1 个答案: