Масштабировать размер шрифта на основе динамической ширины/высоты родительского элемента DIV (jQuery)

Открыто для использования: jQuery / Javascript / PHP / CSS3 / HTML5

Я пытаюсь добиться динамического изменения размера шрифта дочернего элемента в зависимости от ширины и высоты родительского блока. Родительский div изменяет размер при наведении с помощью jQuery. Теперь я хочу, чтобы текст внутри него увеличивался и уменьшался вместе с ним (представьте себе эффект увеличения/уменьшения масштаба).

Небольшая демонстрация: http://jsfiddle.net/Aye4h/

В приведенном выше примере показано динамическое изменение размера шрифта при изменении размера окна. Это в значительной степени показывает, чего я пытаюсь достичь, за исключением того, что размер будет основываться не на окне, а на его родительском div.

... Похоже на свойство background-size CSS3, за исключением текста.

Вот код, который я нашел в Интернете (ССЫЛКА< /strong>), который, как я думал, я мог бы использовать.
Код делает это для span внутри родительского элемента #sidebar:

<script type="text/javascript">
$(document).ready(function() {
    var originalFontSize = 12;
    var sectionWidth = $('#sidebar').width();

    $('#sidebar span').each(function(){
        var spanWidth = $(this).width();
        var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
        $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});
    });
});
</script>

А вот мой код jQuery для родительских элементов DIV :
(они называются .bubbles, и при наведении они увеличиваются в размере)

$(window).bind("load", function() {

// LOAD BUBBLES
    $('.bubble').animate({
    opacity: 1,
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    margin: '-75%'
  }, 400, function() {


// NOW, LOAD HOVER EFFECTS
// THIS EXPANDS BUBBLES BY 20% OF THEIR WIDTH & HEIGHT WHEN HOVERED
        $(".bubble").on('scale', function(e, s) {
            var data = $.data(this, 'size'),
                w = data.width,
                h = data.height;
            $(this).stop().animate({
                width: w * s,
                height: h * s,
                marginLeft: data.marginLeft - w * (s-1) / 2,
                marginTop: data.marginTop - h * (s-1) / 2
            });
        }).each(function() {
            var $this = $(this);
            $.data(this, 'size', {
                width: $this.width(),
                height: $this.height(),
                marginLeft: parseInt($this.css('margin-left')),
                marginTop: parseInt($this.css('margin-top'))
            });
        }).hover(function() {
            $(this).trigger('scale', [1.2])
        }, function() {
            $(this).trigger('scale', [1.0])

            });
        });

 });

РЕАЛЬНАЯ ДЕМО : http://174.127.117.20/~interact/

Теперь я не знаю, как их объединить. Мой текущий код уже сохраняет ширину и высоту пузыря и расширяет пузырь на 20% от его исходной высоты и ширины при наведении...

Теперь мой вопрос: как мне включить в это текст дочернего элемента H1 (помещенного внутри .bubble)? Я хочу масштабировать все внутри .bubble, чтобы соответствовать ему при изменении размера. Я обнаружил методы выше, но я не знаю, как реализовать их с моим текущим кодом, так как они не совсем применимы как есть.

Вся помощь будет принята с благодарностью, большое спасибо за ваше время!


scale jquery font-size jquery-ui-resizable
person Mafia    schedule 07.11.2012    source источник
comment
если вы используете px вместо % в jsfiddle в этой строке $('body').css('font-size', fontSize + 'px'); что произойдет тогда? как здесь jsfiddle.net/Aye4h/1   -  person Om3ga    schedule 07.11.2012
comment
Благодарю за ваш ответ! Я не понимаю, как это может быть связано с моим вопросом? jsfiddle должен был просто показать, чего я пытаюсь достичь, но это не код, с которым я работаю (учитывая, что размер шрифта изменяется в зависимости от размера его окна, а НЕ размер его родительского элемента). Я пытаюсь добиться последнего.   -  person Mafia    schedule 07.11.2012

Ответы (1)


arrow_upward
4
arrow_downward

Я добился этого, используя шкалу CSS3:

(... предполагая, что a.expand содержит наш контент для масштабирования.)

a.expand {
    transition:all .8s; 
    -moz-transition:all .8s; /* FIREFOX */
    -webkit-transition:all .8s; /* SAFARI and CHROME */
    -o-transition:all .8s; /* OPERA */


    color: #fff;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 2em;
    width: 250px; /* 2x WIDTH HERE */
    height: 250px;  /* 2x HEIGHT HERE */

    transform: scale(0.80);
    -webkit-transform: scale(0.80);
    -moz-transform: scale(0.80);
    -o-transform: scale(0.80);
    -ms-transform: scale(0.80);
}

a.expand:hover {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}

Сначала я уменьшаю содержимое, чтобы избежать эффекта пикселизации/размытия при чрезмерном масштабировании элемента по сравнению с заданным размером. Приведенный выше код работает отлично.

Решение полностью реализовано с помощью CSS3.

person Mafia    schedule 11.12.2012