javascript - 在CSS中显示一半元素

Question

所以我希望能够只显示一半的元素。现在我可以做类似下面的事情:

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
};

但这只是向 DOM 添加额外的元素，如果在一些简单的 css 或 javascript 中，我可以将其设置为仅显示(或剪切)元素的一部分，那么这些元素是不必要的。那可能吗？如果是，怎么办？

更新:

大家猜完后，here is a fiddle不断地将内容附加到容器中。要回答我的问题，您需要有一个函数来更改要附加的特定 div 的 css，以便它只附加指定的一半内容

Answer 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 */
}

这将实现这种居中的外观......您可以从这里运行它，应该让您了解选项。