Question

当您将鼠标悬停在图片上时，我想创建可在网站http://www.murmure.me/上看到的效果。

我知道他们使用两种不同的图像，但我希望能够复制这种视觉效果而不使用2张图像，只需使用一张图片（一张没有点）并使用javascript / jquery 。有可能吗？

这个问题遵循原来试图用CSS解决问题的问题，但似乎不可能，或者只是在太少的浏览器上：How to create a dotted shadowy effect on an image with CSS?）

感谢您的帮助！

Answer 1

这看起来像是两部分问题：1）去饱和/灰白图像。 2）以有序的方式在它上面涂抹许多小点。

1）这是相当简单的。在图像上放置另一个带有半透明灰色背景的元素。在鼠标悬停时，将元素淡化为完全透明。

2）假设跨浏览器兼容性仍然是一个问题，我只能通过一种方式在没有画布的情况下实现这一点。您需要创建一个正确大小的圆形元素（使用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。

Answer 2

我建议使用CSS3过滤器去饱和：

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

然后在图像顶部应用另一个div，背景重复为小圆圈。您可以使用JS来正确调整div的大小。

Answer 3

我建议你在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>

如何用javascript / jquery在图像上实现丝网效果（虚线阴影效果）？

3 个答案: