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

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

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>                

 

转载于:https://www.cnblogs.com/shisanjun/p/4813854.html