创建圆形鼠标hover饱和效果

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

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

边界半径

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

 

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-radius和HTML5 Canvas的选择。 当然,由于这是基于鼠标的,Android支持可能无论如何都不是一个因素。

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

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

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); 

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

如果我已正确理解您的请求,您可以使用一些CSS来实现结果。 我在这里准备了一个小小提琴作为演示: http : //jsfiddle.net/sandro_paganotti/k3AmZ/

这是涉及的代码:

HTML

 

CSS

 figure{ width: 550px; height: 360px; position: absolute; top: 0; left: 0; margin: 0; padding: 0; background-position: 50% 50%; background-repeat: no-repeat; background-image: url('yourimage.png'); } figure[data-desaturated]{ /* I've used CSS filters tu simulate desaturation, you can use your already desaturated image */ -webkit-filter: grayscale(0.9); } figure[data-original]{ width: 360px; left: 95px; border-radius: 180px; opacity: 0; transition: opacity 0.4s; } figure[data-desaturated]:hover + figure[data-original], figure[data-original]:hover{ opacity: 1; } 

我还添加了一个transition来增强体验。

更新

跟随鼠标移动的版本: http : //jsfiddle.net/sandro_paganotti/k3AmZ/3/