Изменить цвет фона в зависимости от движения мыши

Question

есть простой код в Html, javascript, чтобы изменить полный фоновый цвет экрана в соответствии с тем, где находится мышь.Цвета должны исчезнуть, не должно быть никаких перерывов.Просто крутой переход.спасибо

Answer 1

Вы можете прослушать событие mousemove и выполнить некоторые логические вычисления на основе положения и размера окна. Какой должна быть эта логика, зависит от вас, но я сделал для вас быстрый пример (используя jQuery):

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

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

    rgb = [
        Math.round(e.pageX/w * 255),
        Math.round(e.pageY/h * 255),
        150
    ];

    $(document.body).css('background','rgb('+rgb.join(',')+')');

}).resize();

Массив rgb - это массив, в котором я храню значения RGB, которые должны быть применены, а затем я просто меняю значения в зависимости от положения мыши.

Демо: http://jsfiddle.net/WV8jX/

Answer 2

Вы можете установить событие onmouseover для каждого элемента. Например, вы можете установить функцию с именем changeBackground(int code). В каждом элементе вы устанавливаете код, чтобы знать, какой цвет вы хотите установить.

Например, у вас может быть следующее:

<div name="myBackgroundDiv">
    <div onmouseover="changeBackground(1)"/>
    <div onmouseover="changeBackground(2)"/>
    <div onmouseover="changeBackground(3)"/>
</div>

и в changeBackground функции вы можете указать, чтобы изменить цвет фона «myBackgroundDiv» в зависимости от переданного числа.

Вы можете просмотреть это и это .

С уважением,