1

画像の上にホバー乗算効果を作ろうとしています。私はこのチュートリアルに従っています：

デモ: 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();
    });

ホバー時に関数を適切に渡す方法に関するアイデアはありますか?

4

2 に答える 2

0

このコードを試してください：

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

乗算スクリプトを変更して元の画像を非表示にし、ホバー効果を変更してキャンバスを非表示にして元の画像を表示しました

于 2013-02-15T15:03:07.567 に答える
0

このhttp://api.jquery.com/hover/を試しますか?

これを使用して、関数を $("#multiply_hover") に追加できます。ホバー Jquery にはハンドラー IN と OUT があります

于 2013-02-15T14:55:32.797 に答える