4

彩度の低いバージョンとフルカラー バージョンの 2 つのバージョンの画像があります。私が達成したいのは、彩度の低い画像の上にマウスを置くと、画像のカラー バージョンの円が表示されるホバー効果です。彩度の低い画像にスポット ライトを当てて、その色を表示するようなものです。そして、マウスを遠ざけると、彩度の低い状態に戻ります。

おそらくフラッシュを使用できることはわかっていますが、これを JavaScript と CSS で行いたいと考えています。理想的には、JavaScript が無効になっており、幅が流動的 (レスポンシブ) である場合、これは単なる画像に劣化します。

4

3 に答える 3

7

境界半径

CSS3border-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 を使用して実装することもできます。以下は、さまざまなアプローチのブラウザー サポートの比較です。

要するに、IE8 以前はこれらのアプローチの選択肢ではなく、Android のサポートが必要な場合、選択肢はborder-radiusHTML5 Canvas に制限されます。もちろん、これはマウスベースなので、Android のサポートは関係ないかもしれません。

于 2013-04-03T02:00:35.417 に答える
5

<image>正確に重なり合う2 つの SVG 要素を使用します。下はグレースケール画像です。上がカラー画像です。カラー イメージに を適用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);

マウスの動きを追跡し、正しい位置に翻訳を設定するだけです。

于 2013-04-02T18:53:27.787 に答える