3

使用可能: jQuery / Javascript / PHP / CSS3 / HTML5

私が達成しようとしているのは、親 div の width と height に基づいて、子要素の font-size を動的に変更することです。親 div は、jQuery を使用してホバー時にサイズ変更されます。ここで、その中のテキストをそれに合わせて拡大および縮小したいと考えています（ズームイン/ズームアウト効果を想像してください）。

ちょっとしたデモ: http://jsfiddle.net/Aye4h/

上記の例は、ウィンドウのサイズ変更時に動的に変化する font-size を示しています。これは、私が達成しようとしていることのほとんどを示していますが、ウィンドウのサイズではなく、親の divに基づいていることを除いて。

...background-sizeテキスト以外は、CSS3 プロパティに似ています。

これは、オンラインで見つけたコード ( LINK ) で、使用できると思いました。
コードは、親内のスパン#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/

今、私は2つをマージする方法がわかりません。私の現在のコードは、すでにバブルの幅と高さを保存しており、ホバー時にバブルを元の高さと幅から 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 に答える