1

白黒とカラーの 2 つの画像があります。私がやりたいことは、ユーザーがマウスを一番上の白黒画像の上にドラッグして、下のカラー バージョンが表示されるようにすることです。

Flash を使用する必要はありません。HTML 5またはJavascriptでこれを行う方法はありますか?

4

3 に答える 3

2

私はこれを試していませんが、うまくいくはずです：

  1. 非表示の IMG タグに白黒画像をロードする
  2. IMG の onLoad で、drawImage() を使用してそのコンテンツを CANVAS オブジェクトに描画します。(キャンバスは、カラー画像を含む IMG の上に絶対に配置されます)
  3. マウスのドラッグ時にキャンバスからピクセルを消去する JavaScript を記述します (つまり、アルファをゼロに設定します)。

注: canvas オブジェクトは IE8 以前ではネイティブにサポートされていません: http://en.wikipedia.org/wiki/Canvas_element#Support

于 2012-05-30T21:24:51.433 に答える
1

JQuery UI のDroppableプラグインを参照してください。基本的に、2 つの画像を互いにドラッグおよびドロップ可能にすることができます。これが発生すると、3 番目の画像が表示されるようになります。

JSFiddle の例を次に示します。

于 2012-05-30T21:17:42.240 に答える
0

私はあなたの質問を完全に読み違えたかもしれないと思うので、あなたが意味したと思うことで新しい回答を作成しました. マウスオーバーで白黒画像を非表示にしたいだけなら、jquery でこのようなことができます。

$('.BandWImage').hover(function(){
    $(this).fadeOut(100);
    $('.ColorImage').fadeIn(500);
});

colorImage のスタイルは「display:none;」です。CSS を使用して白黒画像の後ろに配置します。白黒画像にカーソルを合わせると、画像がフェードアウトし、カラー画像がフェードインします。

于 2012-05-30T21:34:54.803 に答える