你的位置:首页 > Java教程

[Java教程]网页常用动态效果


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

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>