关键在于设定开关标识,父盒子固定定位,按钮盒子绝对定位超出父盒子部分
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(){ //开关按钮,有两个状态,首先有一个初始状态 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>