0

我试图在单击鼠标时将圆圈缩小 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/

除了手动调整完成回调之外，有没有一种巧妙的方法来解决这个问题？谢谢！

4

1 回答 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

使用 ANIMATE 一次性完成所有操作：

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

于 2013-09-30T19:07:43.923 回答