javascript - 创建圆形鼠标悬停饱和效果

我有一个图像的两个版本:不饱和版本和全彩色版本。我要实现的是一种悬停效果，其中将鼠标悬停在去饱和的图像上可以看到图像彩色版本的圆圈。这就好比将聚光灯照在去饱和的图像上以显示其颜色。然后，当您将鼠标移开时，它会退回到其饱和状态。

我知道我可能会使用Flash，但是我想使用JavaScript和CSS来做到这一点。理想情况下，如果禁用JavaScript，它将降级为仅图像，并且宽度可变(响应)。

最佳答案

边界半径

CSS3 border-radius可用于创建带有背景图像的round div，该背景图像用作图像聚光灯。聚光灯可以叠加在主图像上，并根据鼠标坐标定位。 JSFiddle Demo

尽管CSS3中没有一种自然的方法可以柔化聚光灯的边缘(这需要支持向任意内容添加不透明度渐变)，但是可以使用一组交错的元素来模拟它，这些元素具有增大的半径和减小的不透明度。 Updated demo with softened edges

在updated demo中，可以使用以下变量来调整聚光灯的大小和柔和度:

var spotlightDiameter = 150;      // Base size (not including the soft edge)
var numSpotlightLayers = 6;       // More layers = softer edges
var spotlightLayerThickness = 2;  // Thinner = the softening is more subtle

这是modified demo，聚光灯下有明显的涟漪。增加了层的厚度，以更清楚地显示其工作原理。

下面是带有尖锐边缘的初始版本代码的简化版本。

HTML

<div class="content">
    <div class="spotlight"></div>
</div>

CSS

.content {
    position: relative;
    width: 640px;
    height: 480px;
    background: url(desaturated.jpg) no-repeat 0 0;
    overflow: hidden;
}
.spotlight {
    display: none;
    position: absolute;
    background: url(overly_saturated.jpg) no-repeat 0 0;
}

jQuery

var spotlightDiameter = 150;

// Update the spotlight position on mousemove
$('.content').on('mousemove', function(e){
    var center = {x: e.pageX - this.offsetLeft,
                  y: e.pageY - this.offsetTop};
    var x = center.x - (spotlightDiameter >> 1);
    var y = center.y - (spotlightDiameter >> 1);

    $('.spotlight').css({left: x + 'px', top: y + 'px',
                         backgroundPosition: -x + 'px ' + -y + 'px'}).show();
});

// Hide the spotlight on mouseout
$('.content').on('mouseout', function(e){
    $('.spotlight').hide();
});

// Initialize the spotlight
$(document).ready(function(){
    $('.spotlight').width(spotlightDiameter + 'px')
                   .height(spotlightDiameter + 'px')
                   .css({borderRadius: (spotlightDiameter >> 1) + 'px'});
});

替代实现

这也可以使用HTML5 Canvas或SVG来实现。下面是浏览器支持的不同方法的比较:

border-radius:IE8 or earlier不支持。

HTML5 Canvas :IE8 or earlier不支持。

SVG:IE8 or earlier或Android 2.3 or earlier(仍然是Android marketshare的大部分)不支持。

简而言之，IE8和更早版本不是这些方法中的任何一种，如果需要Android支持，则只能将选择限制为border-radius和HTML5 Canvas。当然，由于这是基于鼠标的，因此无论如何都不支持Android。