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

Question

我有两个版本的图像:去饱和版和全彩版.我想要实现的是悬停效果,其中鼠标在去饱和图像上显示出图像颜色版本的圆圈.这有点像在不饱和图像上闪耀聚光灯以显示其颜色.然后当你移开鼠标时,它会逐渐消失回去饱和状态.

我知道我可能会使用flash,但我想用JavaScript和CSS来做这件事.理想情况下,如果JavaScript被禁用并且宽度可以是流动的(响应),这将降低为仅图像.

Answer 1

边界半径

CSS3 border-radius可用于创建带有背景图像的圆形div,该背景图像用作图像聚光灯.聚光灯可以叠加在主图像的顶部,并根据鼠标坐标定位.JSFiddle演示

虽然没有自然的方法来软化CSS3中聚光灯的边缘 - 这需要支持向任意内容添加不透明度渐变 - 但可以使用交错的元素集来模拟半径增加和不透明度降低.更新了带有软化边缘的演示

在更新的演示中,可以使用以下变量调整聚光灯的大小和柔和度:

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

这是一个经过修改的演示,其中聚光灯有明显的涟漪.增加层的厚度以更清楚地显示其工作原理.

下面是具有锐边的初始版本的代码的简化版本.

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或更早版本不支持.
• HTML5 Canvas:IE8或更早版本不支持.
• SVG:IE8或更早版本,或Android 2.3或更早版本(仍然是大多数Android市场份额)不支持.

简而言之,IE8及更早版本不适用于任何这些方法,如果需要Android支持,则会限制对border-radiusHTML5 Canvas 的选择.当然,由于这是基于鼠标的,因此Android支持可能不是一个因素.

Answer 2

使用两个<image>完全重叠的SVG 元素.底部是灰度图像.顶部是彩色图像.将a clipPath应用于彩色图像,然后调整剪切路径上的变换以显示上部图像的不同区域.

简单演示:http://jsfiddle.net/hZgkz/

SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="250px">
  <defs>
    <image id="im" width="500" height="500"
     xlink:href="http://www.nyweamet.org/wp-content/uploads/2011/09/0942a__grandCentralStationExterior.jpg"/>
    <clipPath id="clip">
      <path id="path" transform="translate(40,60)"
            d="M60,0 A30,30 1,0,0 60,120 30,30 1,0,0, 60,0"/>
    </clipPath>
  </defs>
  <use id="clippedImage" xlink:href="#im" clip-path="url(#clip)"/>
</svg>

以及移动圆圈的JavaScript:

var tx = document.querySelector('#path').transform.baseVal.getItem(0);
setInterval(function(){
  var ms = (new Date)*1;
  tx.matrix.e = Math.sin(ms/812)*150 + 160;
  tx.matrix.f = Math.cos(ms/437)*60 + 70;
},50); 

您所要做的就是跟踪鼠标移动并将转换设置到正确的位置.