0

そのため、要素の半分だけを表示できるようにしたいと考えています。これで、次のようなことができます。

function half($elem,which){
    //here I would get the scrolling position
    //of the element $elem along with the outer
    //width and outer height. Then, depending on
    //what 'which' is (left,right,top,bottom), the
    //function would append an element with the same
    //background color as the body background in
    //order to cover the correct part of the element
};

しかし、単純な css や JavaScript で要素の一部のみを表示 (または切り取り) するように設定できる場合、それは不要なアイテムを DOM に追加するだけです。それは可能ですか？もしそうなら、どのように？

アップデート：

皆さんが推測しようとしていると思いますが、コンテナに常にコンテンツを追加するフィドルを次に示します。私の質問に答えるには、追加される特定の div の css を変更して、コンテンツの指定された半分のみを追加する関数が必要です。

4

3 に答える 3

1

あなたが提供する少量の情報に基づいて推測するのは難しいことを意味しますが、次のようなものはうまくいくはずです:

.ElementContainer {
    width:500px; /* example, random number */
    overflow:hidden; /* important part */
}

.Element {
    width:200%; /* relative to parent, so double the width of parent */
}

そして、次のようなものです：

<div class="ElementContainer">
    <img src="whatever.jpg" alt="" class="Element" />
</div>

左から前半のみ表示されます。あなたがしたい場合... 真ん中の半分か何か、ポジショニングを使用する必要があります：

.ElementContainer {
    position:relative; /* must declare position of parent */
    width:500px;
    height:200px; /* since child is removed from DOM, it will be 0 height unless declared explicitly */
    overflow:hidden;
}

.Element {
    width:200%;
    position:absolute;
    top:0; /* always declare both X & Y */
    left:-25%; /* can be any negative % you want, this is just an example */
}

これにより、この種の中央表示が行われます...ここから実行できます。オプションのアイデアが得られるはずです。

于 2013-06-24T19:57:25.387 に答える
1

CSS で特定のピクセルの高さの後で切り落とすのは非常に簡単です。

.restricted {overflow: hidden; height: 45px; }

この jsfiddle を参照してください: http://jsfiddle.net/jrvf7/

要素の高さが事前にわからない場合、正確に要素の半分の後に切り取るには、JavaScript が必要になります。それについては、他の提出された回答を参照してください。ただし、可能であれば、CSS ルートを使用することをお勧めします。

于 2013-06-24T20:00:26.733 に答える