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

html代码：

1 <div class="switch">
2     <dl class="clearFix">
3         <dt class="fl">
4             点我试试
5         </dt>
6             <dd class="fl">
7             </dd>
8     </dl>
9 </div>

css代码：

1 .switch{position:absolute;right:0;top:100px;height:400px;overflow: hidden;cursor: pointer;}
2 .switch dt{width: 30px;padding:100px 10px;height: 200px;text-align:center;font-size: 20px;color: #fff;background: #45b035;}
3 .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>

效果如下：

 

posted @ 2016-06-15 15:36  rain92  阅读(1835)  评论(0)  编辑  收藏  举报