Как уменьшить div, который содержит текст?

0

Я пытаюсь уменьшить круг на 50% при щелчке мышью. Я сделал это, используя эффект масштабирования пользовательского интерфейса jQuery.

Дива

<div id='circle' class='circle'></div>

Js - это

var percent = 0.5;

$('#circle').click(function () {
    var height = $(this).height();
    var width = $(this).width();
    var centerX = $(this).position().left + $(this).width()/2.0;
    var centerY = $(this).position().top + $(this).height()/2.0;
    $(this).effect( "scale", { percent: percent * 100 }, 1000, function () {
        var newTop = centerY - (height * percent)/2.0;
        var newLeft = centerX - (width * percent)/2.0;
        $('#circle').offset({ 'top': newTop, 'left': newLeft });
        $('#circle').css({'height': height * percent, 'width': width * percent });
    });
});

Этот фрагмент кода работал, пока я не добавил текст на круг, как

<div id='circle' class='circle'>
  <span class="title">Title</span>
</div>

Название уменьшалось с кругом, но по завершении оно восстанавливалось до первоначального размера и делало круг овальным. Попробуйте эту скрипку: http://jsfiddle.net/marsant/Ycakg/

Есть ли опрятный способ решить эту проблему, кроме ручной настройки обратного вызова завершения? Благодарю!

  • 0
    display: table-cell имитирует поведение display: table-cell реальной таблицы (все ячейки имеют одинаковую высоту, содержимое не может покинуть ее контейнер / ячейку, а ячейки не имеют полей, но могут иметь отступы и границы). Также любой плавающий элемент, применяемый для отображения: элементы table-cell отменяют эффекты table-cell. Из-за этого, как только вы достигнете ширины текста, div не сможет сузиться, превратив его в овал. Вам нужно будет либо перейти к другой настройке дисплея, либо уменьшить размер текста по ширине / высоте.
Теги:
scale

1 ответ

2
Лучший ответ

Вы можете быстро исправить, добавив что-то вроде:

$(this).find('*').filter(function(i) { return $(this).text != "" && !$(this).children().length }).each(function(i) {
    var curSize = parseFloat($(this).css('fontSize'));
    $(this).css('fontSize', curSize / 2);
});
  • $(this).find('*'): получить все внутренние элементы круга div
  • .filter(function(i) { return $(this).text != "" && !$(this).children().length }): сужает наш результат только внутренними элементами, которые имеют текст и другие внутренние элементы
  • .each(function(i) {: начинает проходить через каждый элемент, поэтому мы можем изменить его размер шрифта
  • var curSize = parseFloat($(this).css('fontSize')); : получить текущий размер шрифта текущего внутреннего элемента
  • $(this).css('fontSize', curSize/2); : Установите этот внутренний шрифт элементов на новый размер шрифта, который составляет половину старого

Если вы хотите, чтобы вы немного подружились с вашей реанимацией, вы можете пойти:

var curSize = parseFloat($(this).css('fontSize')),
        newSize = curSize / 2
    $(this).animate({ fontSize: newSize });

Хотя, если вы хотите, чтобы он соответствовал именно анимации, вам, вероятно, потребуется найти решение для CSS или немного изменить весь скрипт. Я посмотрю, через секунду...

WORKING EXAMPLE

ИСПОЛЬЗОВАНИЕ АНИМАЦИИ, ЧТОБЫ ДЕЛАТЬ ВСЕ ВСЕ ЕЩЕ:

$('#circle').click(function () {
    var height = $(this).height(),
        newHeight = height / 2,
        width = $(this).width(),
        newWidth = width / 2,
        fontSize = parseFloat($(this).css('fontSize')),
        newFontSize = fontSize / 2,
        newLeft = parseFloat($(this).css('left')) + (newWidth / 2),
        newTop = parseFloat($(this).css('top')) + (newHeight / 2);

    $(this).animate({ 
        height: newHeight,
        fontSize: newFontSize,
        left: newLeft,
        top: newTop,
        width: newWidth 
    });
});

ПРИМЕЧАНИЕ. Это требует незначительных изменений в CSS. Я бы изменил .circle чтобы иметь relative положение и перемещать font-size: 80px; к .circle:

.circle {
    background:red;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    top: 10px;
    left: 10px;
    font-size: 80px;    
    position: relative;
}
.title {
    color: #fff;
    font-family:'Helvetica';
}

WORKING EXAMPLE

Поделиться
  • 0
    Он мог переключиться на использование .animate, чтобы он мог анимировать width / height / fontsize одновременно. Слишком плохие объекты обещаний анимации не вызывают событие прогресса на каждом шаге, что сделало бы это простым.
  • 0
    Похоже, проблема в «размере шрифта» для заголовка. Я изменил его с 80px до 5em . Тогда, кажется, работает гладко. Скрипка: jsfiddle.net/marsant/kmcAg/1
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню