javascript - 如何从鼠标指针创建 "aura"效果？

Question

如果您打开谷歌浏览器并打开多个选项卡，您可以通过将鼠标悬停在背景选项卡上来查看效果。指针将具有跟随它的“光环”效果。

澄清一下，我不是在问如何让整个选项卡发出更亮的颜色，我是在问如何让指针在它的某个指定半径内产生效果。

Answer 1

关键部分是获取鼠标坐标，然后使用这些坐标放置径向渐变。

var originalBG = $(".nav a").css("background-color");

$('.nav li:not(".active") a').mousemove(function(e) {
    x = e.pageX - this.offsetLeft;
    y = e.pageY - this.offsetTop;
    xy = x + " " + y;
    bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
    bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";

    $(this)
        .css({background: bgWebKit})
        .css({background: bgMoz});
    }).mouseleave(function() {
    $(this).css({
        background: originalBG
    });
});

类似的东西就可以完成这项工作。

查看来自杰出的 Chris Coyier 的演示:http://css-tricks.com/examples/MovingHighlight/