-1

我正在尝试实现本网站http://www.qvivo.com/中使用的效果。jquery 工作正常，我现在的问题是如何在左侧面板/侧边栏展开时自动调整主要内容的大小。请帮助伙计们。先感谢您。

4

2 回答 2

3

来自 QVIVO 的 Liam。我写了一个快速的 jsFiddle ( http://jsfiddle.net/fZy6z/ ) 来模仿网站的框架。

我的主要建议是尽量让浏览器为您完成大部分工作。我们没有使用 JQuery 为 DOM 设置动画，而是简单地使用 CSS 转换添加和删除类标签。最初您不会看到好处，但是当您开始用复杂的 DOM 树填充右侧面板时，您会发现平滑动画的唯一方法是通过硬件加速过渡。

关于自动调整主要内容的问题，这很简单——永远不要为包含的 div 声明宽度值，因为它们无论如何都会自动拉伸到页面的宽度。然后可以为这些 div 中的内容指定 100% 的宽度值。

干杯，利亚姆

于 2012-09-20T02:00:28.383 回答
1

I am not the best with Jquery, So I mix it a little bit with JavaScript.

You will need to play with the Width % of what you want and look.

from your CSS, First I put the class pannel_button I put it Absoute. Also I remove the float left 

.panel_button{
    height: 50px;
    width: 50px;
    cursor: pointer;
    background-image: url(images/arrow.png);
    background-position: center center;
    background-repeat: no-repeat;
    border: thin solid #CCC;
    margin-left: -1px;
    top: 200px;
    position:absolute;
}

Then for your Jquery ands some of my JavaScript, as I am better in JS, I made the animation this way

var content = document.getElementsByClassName("content");
$('.panel_button').click(function()
{
    $(".panel").animate({width:'toggle'},500); 

    if( content[0].style.width=="70%" ){ 
        $(".content").animate({width:"90%"},500);
           $(".panel_button").animate({left:"0%"},500); 
    }
    else{  $(".content").animate({width:"70%"},500);
           $(".panel_button").animate({left:"29%"},500); 
          }
});

But Like I said, you will need to play with the Width and positon to make your button where you want it really. And also, remove the float left for your Hover.

于 2012-09-20T02:25:22.880 回答