Question

点击鼠标，我试图缩小一个圆圈50％。我是通过使用jQuery UI的缩放效果来实现的。

div是

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

除了手动调整完成回调之外，还有一种解决此问题的简洁方法吗？谢谢！

Answer 1

您可以通过添加以下内容进行快速修复：

$(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

如何缩小包含文本的div？

1 个答案: