页面悬浮窗（点击展开或者收缩）

html代码：

<div class="switch">
    <dl class="clearFix">
        <dt class="fl">
            点我试试
        </dt>
            <dd class="fl">
            </dd>
    </dl>
</div>

css代码：

.switch{position:absolute;right:0;top:100px;height:400px;overflow: hidden;cursor: pointer;}
.switch dt{width: 30px;padding:100px 10px;height: 200px;text-align:center;font-size: 20px;color: #fff;background: #45b035;}
.switch dd{width: 0px;height: 400px;background: url(img01/11.jpg);}

js代码：

<script type="text/javascript">
    $("dt").on("click",function(){
        Switch(".switch dd");                        
    })
    function Switch(Obj){
        if($(Obj).width()==0){
            $(Obj).animate({
                width:"400px"
            },1000);
        }else{
            $(Obj).animate({
                width:"0px"
            },1000);
        }
    }
</script>

效果如下：