3

开放使用：jQuery / Javascript / PHP / CSS3 / HTML5

我想要实现的是根据其父 div 的 width 和 height 动态更改子元素的字体大小。父 div 使用 jQuery 在悬停时调整大小。现在，我希望它里面的文本随之增长和缩小（想象一下放大/缩小效果）。

一个小示范：http: //jsfiddle.net/Aye4h/

上面的示例显示了字体大小在窗口调整大小时动态变化。这几乎显示了我想要实现的目标，除了它不会基于窗口的大小，而是基于其父 div。

...有点像background-sizeCSS3 属性，除了文本。

这是我在网上找到的一些代码（LINK），我认为我可以使用它们。
该代码为parent 内的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>

同时，这是我的父 DIV 的 jQuery 代码：（
它们被称为.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调整大小时缩放内部的所有内容以匹配它。我已经发现了上面的方法，但我不知道如何用我当前的代码来实现它，因为它们并不完全适用。

所有帮助将不胜感激，非常感谢您的宝贵时间！

4

1 回答 1

4

我使用 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完成。

于 2012-12-11T07:42:27.603 回答