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”的背景颜色。

您可以查看this和this。

致以最诚挚的问候，

根据鼠标移动更改背景颜色

2 个答案: