网页惯用动态效果-客服广告

关键在于设定开关标识，父盒子固定定位，按钮盒子绝对定位超出父盒子部分

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>