-1

ウェブサイトhttp://www.murmure.me/で画像にカーソルを合わせると、その効果が見られるようにしたいと思います。

2つの異なる画像を使用していることは知っていますが、1つの画像（ドットのない画像）とjavascript / jqueryを使用するだけで、2つの画像なしでこの種の視覚効果を再現できるようにしたいと思います。出来ますか ？

この質問は、CSSの問題を解決しようとした元の質問に続くものですが、不可能に思えた、またはブラウザが少なすぎる場合：CSSを使用して画像に点線の影の効果を作成するにはどうすればよいですか？）。

ご協力ありがとうございました！

4

3 に答える 3

0

これは 2 つの部分からなる問題のようです: 1) 彩度の低下/画像のグレー化。2) 整然とした方法で、その全体に多くの小さなドットを適用します。

1) これはかなり簡単です。画像の上に半透明の灰色の背景を持つ別の要素を配置します。マウスオーバーで、要素を完全に透明にフェードします。

2) ブラウザー間の互換性がまだ懸念事項であると仮定すると、キャンバスなしでこれを達成する方法は 1 つしかありません。正しいサイズの円形要素を (border-radius を使用して) 作成し、それを画像の幅と高さにわたって何度も複製する必要があります。画像の「ピクセル」の領域を計算し、その数をドロップする必要があります。ループに絶対に配置するのではなく、透明度コンテナーに浮かせたままにします。

http://www.tutorialsbucket.com/draw-basic-shapes-css3-tips-and-tricksから、単一のドットの css を次に示します。

.circle {
    height: 2px;
    width: 2px;
    background-color: #72b8c2;
    border: 2px solid #234e5e;

    /* In this case we use half of the
     width and height as radius. */

    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

円の幅を 2px に設定して、もう少し「印刷」のような効果を与えます。次の行に沿って、幅 * 高さ / 円の直径の数だけ、そのクラスと左のフロートをイメージ オーバーレイの子として複製します。

for(var i=0; i<=$('#container').width()*$('#container').height()/$('#originCircle').width(); i++)
{
$(container).append($('#originElement').clone())
}

神があなたの DOM を憐れんでくださいますように。

于 2012-11-06T18:24:52.030 に答える
0

最新のすべてのブラウザーでサポートされている html5 の canvas 要素を検索することをお勧めします。

キャンバスはメディア (画像も含む) のクロス ドメイン ポリシーの対象となるため、jsfiddle サンプルを設定することはできません。だから私はあなたにアイデアを与えるためにここにサンプルを設定しました: HERE

ソースコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas</title>

<style type="text/css">
img{position:absolute;}
canvas{display:none;position:absolute;z-index:100;}
</style>

</head>

<body>
 <img src="beach_volley_layout.jpg"></img>   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
var canvas;
$('img').mouseover(function(){

    canvas = createCanvasOverlay(this);
    $(canvas).fadeIn(600);
}).mouseout(function(){
    $(canvas).fadeOut(600);
});

function createCanvasOverlay(image) {

    var canvas = document.createElement('canvas'),
        canvasContext = canvas.getContext("2d");

    // Make it the same size as the image
    canvas.width = image.width;
    canvas.height = image.height;

    // Drawing the default version of the image on the canvas:
    canvasContext.drawImage(image, 0, 0);


    // Taking the image data and storing it in the imageData array:
    var imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height),
        data = imageData.data;

    // Loop through all the pixels in the imageData array, and modify
    // the red, green, and blue color values.
    for (var i = 0, z = data.length; i < z; i++) {

        // The values for red, green and blue are consecutive elements
        // in the imageData array. We modify the three of them at once:
        data[i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : 20);
        data[++i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
        data[++i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : 20);

        // After the RGB elements is the alpha value, but we leave it the same.
        ++i;
    }

    // Putting the modified imageData back to the canvas.
    canvasContext.putImageData(imageData, 0, 0);

    // Inserting the canvas in the DOM, before the image:
    image.parentNode.insertBefore(canvas, image);

    return canvas;
}
</script>
</body>
</html>
于 2012-11-06T19:08:54.707 に答える
0

彩度を下げるために CSS3 フィルターを使用することをお勧めします。

.desaturate { filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

次に、画像の上にレイヤー化された別の div を適用し、背景を小さな円として繰り返します。JS を使用して、この div のサイズを適切に設定できます。

于 2012-11-06T18:50:17.210 に答える