關(guān)鍵在于設(shè)定開(kāi)關(guān)標(biāo)識(shí)，父盒子固定定位，按鈕盒子絕對(duì)定位超出父盒子部分

html代碼：

<div>
　　<img src="images/QQ.jpg" height="311" width="131" alt="">
　　<span><img src="images/qqL.jpg" height="117" width="29" alt=""></span>
</div>

CSS代碼：

div{
　　width:131px;
　　height:311px;
　　background: lightseagreen;
　　position: fixed;
　　right:-131px;
　　top:50%;
　　margin-top:-155px;
}
div span{
　　position: absolute;
　　left:-29px;
　　top:50%;
　　cursor: pointer;
　　margin-top:-58px;
}

JQ代碼：

<script>$(function(){//開(kāi)關(guān)按鈕，有兩個(gè)狀態(tài)，首先有一個(gè)初始狀態(tài)　　var flag=1;　　$('div span').on('click',function(){　　if(flag==1){　　    $(this).parent().animate({right:0},500);　　    $(this).children('img').attr('src','images/qqLOpen.jpg');　    　flag=0;　　}else if(flag==0){        $(this).parent().animate({right:-131},500);        $(this).children('img').attr('src','images/qqL.jpg');        flag=1;        }    })})</script>