Question

我正在尝试对图像进行悬停乘法效果。我正在学习本教程：

演示： http://albertogasparin.it/demo/multiply-filter/

http://albertogasparin.it/articles/2011/05/html5-multiply-filter-canvas/

我遇到的问题是我不知道如何传递给函数，所以它只是悬停在“id =”multiply_hover“上，因为现在在页面加载后会显示乘法过滤器。

这是我的标记：

<div class="item">
    <img id="multiply_hover" src="img/coleccionesII_1.jpg" alt="coleccionesII_1" width="195" height="343">
    <div class="item_info">
        <div class="item_text">
            <a href="javascript:void(0)">SEDA BLOUSE BOLSILLOS</a>
            <a href="javascript:void(0)">CREP PANTALÓN</a>
            <a href="javascript:void(0)">Zapato Rojo</a>
        </div>
    </div>
</div>

使用此脚本：

var multiplyFilter = (function() {
    //** private vars **//
    var multiplyColor,
        imageBottom, imageId,
        canvas;

    //** private functions **//
    function createCanvas() {
    canvas = document.createElement('canvas');
    canvas.width = imageBottom.width;
    canvas.height = imageBottom.height;
    imageBottom.parentNode.insertBefore(canvas, imageBottom);
    // no canvas support?
    if (!canvas.getContext) { return; }

    draw();
    }

    function draw() {
    var context, imgData, pix,
        w = imageBottom.width,
        h = imageBottom.height;
    // get 2d context
    context = canvas.getContext('2d');
    // draw the image on the canvas
    context.drawImage(imageBottom, 0, 0);
    // Get the CanvasPixelArray from the given coordinates and dimensions.
    imgData = context.getImageData(0, 0, w, h);
    pix = imgData.data;
    // Loop over each pixel and change the color.
    for (var i = 0, n = pix.length; i < n; i += 4) {
        pix[i ] = multiplyPixels(multiplyColor[0], pix[i ]); // red
        pix[i+1] = multiplyPixels(multiplyColor[1], pix[i+1]); // green
        pix[i+2] = multiplyPixels(multiplyColor[2], pix[i+2]); // blue
        // pix[i+3] is alpha channel (ignored)

        // another check to see if image is still empty
        if(i < 5 && !pix[i] && !pix[i+1] && !pix[i+2] && !pix[i+3]) {
        canvas.parentNode.removeChild(canvas);
        setTimeout(function() { multiplyFilter.init(imageId, multiplyColor); }, 500);
        return false;
        }
    }
    // Draw the result on the canvas
    context.putImageData(imgData, 0, 0);
    }

    //** helper function **//
    function multiplyPixels(topValue, bottomValue) {
    // the multiply formula
    return topValue * bottomValue / 255;
    }       


    //** public functions **//
    return {
    init : function(imgId, color) {
        imageId = imgId;
        imageBottom = document.getElementById(imageId);
        multiplyColor = color;

        // lauch the draw function as soon as the image is loaded
        if(imageBottom && imageBottom.clientWidth > 50) { // image loaded
        createCanvas();
        } else { // not yet ready
        setTimeout(function() { multiplyFilter.init(imageId, color); }, 1000);
        }
    }
    }
})();


multiplyFilter.init('multiply_hover', [0, 0, 210]);

我尝试使用类似这样的东西，它在悬停时起作用但根本不好，因为它会在每个悬停时创建一个新的画布元素：

    // Hover effect
    $(".item").bind('mouseenter', function() {
        $(this).children(".item_info").fadeIn();
        multiplyFilter.init('multiply_hover', [0, 0, 210]);
    });

    $(".item").bind('mouseleave', function() {
        $(this).children(".item_info").fadeOut();
    });

关于如何在悬停时正确传递函数的任何想法？

Answer 1

你试试这个http://api.jquery.com/hover/吗？

您可以使用它将函数添加到$（“＃multiply_hover”）。 Hover Jquery有处理程序IN和OUT

Answer 2

试试这段代码：

<!DOCTYPE html>
<html>
<body>
    <div class="item">
        <img id="multiply_hover" src="img/coleccionesII_1.jpg" alt="coleccionesII_1">
        <div class="item_info">
            <div class="item_text">
                <a href="javascript:void(0)">SEDA BLOUSE BOLSILLOS</a>
                <a href="javascript:void(0)">CREP PANTALÓN</a>
                <a href="javascript:void(0)">Zapato Rojo</a>
            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>

    var multiplyFilter = (function() {
        //** private vars **//
        var multiplyColor,
            imageBottom, imageId,
            canvas;

        //** private functions **//
        function createCanvas() {
        canvas = document.createElement('canvas');
        canvas.width = imageBottom.width;
        canvas.height = imageBottom.height;
        imageBottom.parentNode.insertBefore(canvas, imageBottom);
        // no canvas support?
        if (!canvas.getContext) { return; }

        draw();
        }

        function draw() {
        var context, imgData, pix,
            w = imageBottom.width,
            h = imageBottom.height;
        // get 2d context
        context = canvas.getContext('2d');
        // draw the image on the canvas
        context.drawImage(imageBottom, 0, 0);
        // Get the CanvasPixelArray from the given coordinates and dimensions.
        imgData = context.getImageData(0, 0, w, h);
        pix = imgData.data;
        // Loop over each pixel and change the color.
        for (var i = 0, n = pix.length; i < n; i += 4) {
            pix[i ] = multiplyPixels(multiplyColor[0], pix[i ]); // red
            pix[i+1] = multiplyPixels(multiplyColor[1], pix[i+1]); // green
            pix[i+2] = multiplyPixels(multiplyColor[2], pix[i+2]); // blue
            // pix[i+3] is alpha channel (ignored)

            // another check to see if image is still empty
            if(i < 5 && !pix[i] && !pix[i+1] && !pix[i+2] && !pix[i+3]) {
            canvas.parentNode.removeChild(canvas);
            setTimeout(function() { multiplyFilter.init(imageId, multiplyColor); }, 500);
            return false;
            }
        }
        // Draw the result on the canvas
        context.putImageData(imgData, 0, 0);
        }

        //** helper function **//
        function multiplyPixels(topValue, bottomValue) {
        // the multiply formula
        return topValue * bottomValue / 255;
        }       


        //** public functions **//
        return {
        init : function(imgId, color) {
            imageId = imgId;
            imageBottom = document.getElementById(imageId);
            multiplyColor = color;

            // lauch the draw function as soon as the image is loaded
            if(imageBottom && imageBottom.clientWidth > 50) { // image loaded
            createCanvas();
            } else { // not yet ready
            setTimeout(function() { multiplyFilter.init(imageId, color); }, 1000);
            }

            //Hide the original image
            $('#'+imgId).hide();
        }
        }
    })();

    // Hover effect
        $(".item").bind('mouseenter', function() {
            $(this).children(".item_info").fadeIn();
            multiplyFilter.init('multiply_hover', [0, 0, 210]);
        });

        $(".item").bind('mouseleave', function() {
            $(this).children(".item_info").fadeOut();
            $('canvas').hide(); //hide the canvas
            $('#multiply_hover').show(); //show the original image
        });

    </script>


</body>
</html>

我修改了乘法脚本以使其隐藏原始图像，并使用悬停效果使其隐藏画布并显示原始图像

画布繁殖悬停效果

2 个答案: