創建圓形鼠標懸停飽和效果

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-radius和HTML5 Canvas的選擇。 當然，由於這是基於鼠標的，因此Android支持可能不是一個因素。

Answer 2

使用兩個SVG <image>元素完全疊加在一起。 底部是灰度圖像。 頂部是彩色圖像。 將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); 

您所要做的就是跟蹤鼠標移動並將轉換設置到正確的位置。

Answer 3

如果我已正確理解您的請求，您可以使用一些CSS來實現結果。 我在這里准備了一個小小提琴作為演示： http ： //jsfiddle.net/sandro_paganotti/k3AmZ/

這是涉及的代碼：

HTML

<figure data-desaturated></figure>
<figure data-original></figure>

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/