关键在于设定开关标识，父盒子固定定位，按钮盒子绝对定位超出父盒子部分
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(){//开关按钮，有两个状态，首先有一个初始状态varflag=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;
}elseif(flag==0){
$(this).parent().animate({right:-131},500);
$(this).children('img').attr('src','images/qqL.jpg');
flag=1;
}
})
})</script>