javascript - 创建 mask 叠加聚光灯效果以显示图像

Question

我正在尝试在我的投资组合页面上创建一个很棒的“显示”效果。

这是我尝试使用 JS 和 CSS 以视觉方式完成的示例。我的示例是使用 Photoshop 制作的。

这是一个 JS FIDDLE 我找到并修改了我接近的地方。但是聚光灯太“硬”并且远没有我想象的那么优雅。我希望它感觉更像是一个“发光”而不是一个圆圈。

有人知道怎么解决吗？任何帮助将非常感激。我愿意接受任何实现该效果的建议。

// Create the spotlight
function createSpotlight() {
    $('.spotlight').width(spotlightDiameter + 'px')
                   .height(spotlightDiameter + 'px');

    for (var i = 0; i < numSpotlightLayers; i++) {
        var layerDiameter = spotlightDiameter + (i * spotlightLayerThickness * 2);
        var opacity = 1 - (i / numSpotlightLayers);

        $('.spotlight').append('<div class="layer' + i + '"></div>');

        $('.spotlight .layer' + i)
                .width(layerDiameter + 'px')
                .height(layerDiameter + 'px')
                .css({borderRadius: (layerDiameter >> 1) + 'px',
                      opacity: opacity,
                      zIndex: (numSpotlightLayers - i)});
    }
}

Answer 1

所以我要回答我自己的问题。大声疾呼并感谢@Skyline3000 在评论部分提出解决方案。

解决方案是创建一个包含透明中心的径向渐变的大 div。比您编写该 div 脚本以跟随鼠标光标。将径向渐变 div 元素和内容框“body”都设置为负 z-index 值，以免阻碍页面内容。您还需要在 JS 中将 div 设置为“固定”，以便在鼠标靠近视口(viewport)边缘时不创建滚动条。

这是一个可用的 fiddle 。

https://jsfiddle.net/d4em31n2/16/

所需的 CSS:

  position:fixed;
  background: -webkit-radial-gradient(center center, circle cover, rgba(117, 245, 71, 0), rgba(0, 20, 42,1) 4%);
    background:         radial-gradient(center center, circle cover, rgba(117, 245, 71, 0), rgba(0, 20, 42,1) 100%) 4%);

所需的 JS:

var img=$('div');
$(document).ready(function(e) {
    $(document).mousemove(function(e) {
        var positionLeft = e.clientX - img.width()/2;
        var positionTop = e.clientY - img.height()/2;
        img.css({'position': 'fixed', 'left': positionLeft, 'top': positionTop});
        mousePositionValueDiv.text(e.clientX+', '+e.clientY);
    });
});