[JS] jQuery Zoom-Funktion für Content

[#Metho]

Hallo, damit seid ihr in der Lage nur den Content und nicht das Element an sich zu zoomen.

Es ist nur eine Basis und soll nur den Aufbau einer solchen Funktionalität zeigen: Sofern ihr prozentuale Werte benötigt oder Werte welche sich verändern müsst ihr das ganze mit Gettern/Settern oder Hooker erweitern.

PHP Code:

jQuery.fn.scaleContent = function() {
    var zoom = function() {
        /* zoom: */
        if (typeof $(document.documentElement).css('zoom') !== 'undefined') {
            return function(element, scale) {
                element.css('zoom', parseFloat(element.css('zoom')) * scale);
            };
        }

        /* transform-scale: */
        else {
            return function(element, scale, reverseScale, width, height) {
                var matrix = element.css('transform').match(/^matrix\((.*)\)$/);

                if (matrix) {
                    matrix = matrix[1].split(', ')

                    matrix[0] = parseFloat(matrix[0]) * scale;
                    matrix[3] = parseFloat(matrix[3]) * scale;

                    var matrix = 'matrix(' + matrix.join(', ') + ')';
                } else {
                    var matrix = 'matrix(' + scale + ', 0, 0, ' + scale + ', 0, 0)';
                }

                element.css({
                    'transform': matrix,

                    'marginTop': '+=' + (height * scale - height),
                    'marginRight': '+=' + (width * scale - width),
                    'marginBottom': '+=' + (height * scale - height),
                    'marginLeft': '+=' + (width * scale - width),

                    'borderTopWidth': parseInt(element.css('borderTopWidth')) * reverseScale,
                    'borderRightWidth': parseInt(element.css('borderRightWidth')) * reverseScale,
                    'borderBottomWidth': parseInt(element.css('borderBottomWidth')) * reverseScale,
                    'borderLeftWidth': parseInt(element.css('borderTopWidth')) * reverseScale
                });
            }
        }
    }();

    return function(scale) {
        var reverseScale = 1 / scale;

        var width = this.width();
        var height = this.height();

        this.css({
            'width': width * reverseScale,
            'height': height * reverseScale
        });

        zoom(this, scale, reverseScale, width, height);
    };

}(); 


Die Funktion lässt sich mittels jQueryObject.scaleContent(float-Wert) aufrufen. Z. B: $(document.documentElement).scaleContent(0.5);