创建一个圆形的鼠标悬停饱和效应 [英] Creating a circular mouseover saturation effect

问题描述

我有一个形象的两个版本：一个版本降低饱和度和全彩色版本。我想做到的是一个悬停效果，其中将鼠标移至降低饱和度图像显示的图像的颜色版本的一个圆。这将是有点像去饱和图像上闪耀的聚光灯以显示其颜色。然后当你移动鼠标了，它会褪色回其非饱和的状态。

I have two versions of an image: a desaturated version and a full color version. What I want to accomplish is a hover effect in which mousing over the desaturated image reveals a circle of the color version of the image. It would be sort of like shining a spotlight on the desaturated image to show its color. And then when you move the mouse away, it would fade back to its desaturated state.

我知道我大概可以使用闪光灯，但我想用JavaScript和CSS来做到这一点。理想情况下，这将降低到只是一个形象，如果禁用JavaScript，并可以在宽（响应）的液体。

I know I could probably use flash, but I'd like to do this with JavaScript and CSS. Ideally this would degrade to just an image if JavaScript is disabled and could be fluid in width (responsive).

推荐答案

CSS3 边界半径可用于创建用作图像焦点的背景图像圆格。聚光灯可以在主图像的顶端被覆盖，并位于根据鼠标坐标。 的jsfiddle演示

border-radius

CSS3 border-radius can be used to create a round div with a background image which serves as the image spotlight. The spotlight can be overlaid on top of the main image, and positioned based on the mouse coordinates. JSFiddle Demo

虽然没有软化的CSS3聚光灯的边缘自然的方式 - 这将需要增加一个不透明梯度任意内容支持 - 它可以使用交错组随半径和减少不透明的元素进行模拟。 更新演示与软化边缘

Although there's no natural way to soften the edges of the spotlight in CSS3 -- which would require support for adding an opacity gradient to arbitrary content -- it can be simulated using a staggered set of elements with increasing radius and decreasing opacity. Updated demo with softened edges

在更新演示，大小和聚光灯的柔软性可以使用以下变量进行调整：

In the updated demo, the size and softness of the the spotlight can be adjusted using the following variables:

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

下面是一个修改演示，其中的焦点有明显的涟漪。这些层的厚度增加至更清楚它是如何工作显示

Here's a modified demo where the spotlight has noticeable ripples. The thickness of the layers was increased to show more clearly how it works.

下面是code为边缘锋利的最初版本的简化版本。

Below is a simplified version of the code for the initial version with sharp edges.

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实现。下面是对不同的方法浏览器的支持比较：

Alternative implementations

This could also be implemented using HTML5 Canvas or SVG. Below is a browser-support comparison of the different approaches:

• 边界半径：由或更早。


• HTML5画布：由或更早
。

• SVG：由或更早，或的 Android 2.3或更早（这仍然是大多数的Andr​​oid市场份额的 ）。

• border-radius: Not supported by IE8 or earlier.
• HTML5 Canvas: Not supported by IE8 or earlier.
• SVG: Not supported by IE8 or earlier, or Android 2.3 or earlier (which is still most of the Android marketshare).

总之，IE8和更早的版本是没有任何这些方法的一个选项，如果需要支持Android，这限制了选择，边界半径和HTML5画布。当然，由于这是基于鼠标的，Android的支持可能不是一个因素进不去。

In short, IE8 and earlier is not an option for any of these approaches, and if Android support is needed, that limits the choices to border-radius and HTML5 Canvas. Of course, since this is mouse-based, Android support may not be a factor anyhow.

这篇关于创建一个圆形的鼠标悬停饱和效应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！