0

HTML：

<div id="Header">
    <div id="HeaderTitle">
        This is a very long title which should should force HeaderTitle to expand.
    </div>
</div>​

JavaScript：

$(document).ready(function() {
    $('#HeaderTitle').mouseover(function(e) {
        var distanceToMove = $(this).width() - $('#Header').width();
        var timeToTakeMoving = 30 * distanceToMove;

        $(this).animate({
            marginLeft: "-" + distanceToMove + "px"
        }, timeToTakeMoving);
    }).mouseout(function(e) {
        $(this).stop(true).animate({
            marginLeft: "0px"
        });
    });
});​

JSFiddle： http: //jsfiddle.net/QQtp6/7/

div'HeaderTitle'を展開して、その中にテキストを保持したいと思っています。これにより、マウスオーバーでテキストをスクロールできるようになります。divがその内容を保持しないのはなぜですか？

編集：ここでの目標は、すべてのテキストを表示しないことです。テキストの一部を固定幅のdivに表示してから、そのdivでテキストをスクロールしたいと思います。

例：

テキストが「FULLTEXTHERE」の場合、マウスオーバーするまで「FULLTE」のみが表示されると思います。その時点で、FULLがLHSに隠された状態で「TEXTHERE」に移行することを期待します。

EDIT2：解決策は、HeaderTitleにdivの代わりにspanを使用することだと思います。一瞬。

EDIT3：投稿されたソリューション

4

5 に答える 5

0

これを削除するoverflow:hiddenと、divが完全に拡張されます。

これを変更するoverflow:autoと、設定したとおりに100ピクセルに拡張され、スクローラーが表示されます。

デモ：http： //jsfiddle.net/skram/QQtp6/13/

于 2012-06-22T18:18:25.743 に答える
0

固定幅があり、固定幅をオーバーフローするデータを非表示にすることを表明しています。

overflow: hidden;

この属性の目的は、データを非表示にして目的のフォーマットを保持することです。データを表示したい場合は、overflow属性を適用しません。

100pxの幅を維持する必要がある場合は、属性をに変更する必要がありますoverflow: auto;。これにより、コンテンツをコンテナ内で引き続き表示できるようにスクロールバーが追加されます。

于 2012-06-22T18:18:52.303 に答える
0

両方ともoverflow: hiddenあなたwidth: 100pxが望むものを妨げています。固定幅のdivは拡大せず、オーバーフロールールはオーバーフローしたテキストを非表示にします。ルールの1つ、できればオーバーフロールールを削除するだけです。

于 2012-06-22T18:21:09.650 に答える
0

ネストされたdiv要素HeaderTitleをスパンに変更することで問題を解決しました。

http://jsfiddle.net/QQtp6/20/

<div id="Header">
    <span id="HeaderTitle">
        This is a very long title which should should force HeaderTitle to expand.
    </span >
</div>​

$(document).ready( function(){
    $('#HeaderTitle').mouseover(function (e) {
        var distanceToMove = $(this).width() - $('#Header').width();

        var timeToTakeMoving = 30 * distanceToMove; 

        $(this).animate({ marginLeft: "-" + distanceToMove + "px" }, timeToTakeMoving);
            }).mouseout(function (e) {
                $(this).stop(true).animate({ marginLeft: "0px" });
            });
});

#Header
{
    width: 100px;
    font-size: 15px;
    margin-bottom: 5px;
    border-radius: 5px;
    overflow: hidden;
}

#HeaderTitle
{    
    white-space: nowrap; 
    padding-left: 5px;
    font-weight: bold;
    color: Black;
}
于 2012-06-22T18:32:33.613 に答える
0

これが発生している問題は、「HeaderTitle」が「Header」と同じ幅であるためです-（パディング）。私はあなたのために3つの解決策を持っています。

  1. 子要素の幅がわかっている場合。

    .HeaderTitle {width：666px; //子要素の幅、例：ここで }

  2. divをフロートさせて、可能な限り小さくすることもできますが、div内にフローティングがある場合は、 clearfixを使用する必要があります。

    .HeaderTitle {float：左;//例 ここで }

  3. divの代わりにspanを使用します。spanは、divを使用する場合のように奇妙な動作を示さないため、設計で許可されている場合は、spanを使用できます。元。ここ
于 2012-06-23T17:09:45.167 に答える