Question

有一个类似于下面的HTML代码：

<div class="home">
    <img id="back" src="" />
    <div class="menu">
        <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
            <li><a href="#">link4</a></li>
            <li><a href="#">link5</a></li>
        </ul>
    </div>
    <div id="data" class="data">
       a few data that will change for every page, in fact content of each link will comes here by ajax.
    </div>
</div>

这里的所有东西都有宽度和高度的绝对大小，现在我想把这个div中的整个东西最小化90％，所以它们的位置都不会被改变。事实上，我更喜欢将整个代码放入另一个div中，使其比实际大小小一些。

怎么可能？我更喜欢CSS，但jquery也可以。

Answer 1

CSS3方法：

.home {
  -webkit-transform: scale(.9);
  -moz-transform: scale(.9);
  transform: scale(.9);
 }

ETA：请注意browser support for the transform property。

Answer 2

我想这样的东西

<script>
function resize() {
   $("div#data").height(10*$("div#data").height()/100);
}
</script>

Answer 3

尝试这个

<script>
function hideMenus() {
   $(".menu").find("ul").hide();
}
</script>

相对更改div大小的全部内容

3 个答案: