-1

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

我知道他们使用两个不同的图像，但我希望能够在没有 2 个图像的情况下复制这种视觉效果，只需使用一张图片（没有点的图片）和使用 javascript/jquery。是否可以 ？

这个问题遵循最初的问题，它试图用 CSS 解决问题，但似乎不可能，或者只在太少的浏览器上：如何使用 CSS 在图像上创建点阴影效果？)

感谢您的帮助！

4

3 回答 3

0

这看起来将是一个两部分的问题：1）去饱和度/使图像变灰。2）以有序的方式在其上应用许多小点。

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

2）假设跨浏览器兼容性仍然是一个问题，我只能看到一种方法可以在没有画布的情况下完成此操作。您需要创建一个正确大小的圆形元素（使用边框半径），然后在图像的宽度和高度上一遍又一遍地克隆它。您将需要计算图像“像素”中的区域，然后放入那么多。我会尝试将它们漂浮在透明度容器中，而不是绝对地将它们定位在一个循环中。

从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

我建议使用 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 回答
0

我建议您在所有现代浏览器都支持的 html5 中搜索 canvas 元素。

由于画布受媒体（甚至图像）的跨域策略约束，我无法为您设置 jsfiddle 示例。所以我在这里给你一个样本来给你一个想法：这里

这是源代码：

<!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 回答