js实现匀速运动及透明度动画

程序员军强技术 2022年11月18日

0 收藏 550 点赞 3,109 浏览 1241 个字

1.html代码

<body>
  <div id="container">
      <span id="btn"></span>
  </div>
</body>

2.css样式

*{
    margin: ;
    padding: ;
}
#container{
    height: 200px;
    width: 200px;
    position: relative;
    left: -200px;
    background-color: #6effcd;
}
#btn{
    height: 60px;
    width: 30px;
    position: absolute;
    left: 200px;
    top: 75px;
    background-color: #73eeff;
}

3.js代码

window.onload = function(){
var container=document.getElementById('container');
var btn=document.getElementById('btn');
//实现透明度动画
 btn.onmouseover = function(){
        moveStart(,);
    };
 btn.onmouseout = function(){
        moveStart(-,);
    }
//实现匀速移动
btn.onclick = function(){
  if(container.offsetLeft==-)
  {
      moveOut();
  }
  else{
      moveBack();
  }
};
};
var timer=null;//控制container匀速移动的timer
function moveOut(){
  clearInterval(timer);
  timer=setInterval(function(){
  if(container.offsetLeft == )
  {
      clearInterval(timer);
  }
  else{
      container.style.left=container.offsetLeft++'px';
  }
  },);
}function moveBack(){
  clearInterval(timer);
  timer=setInterval(function(){
  if(container.offsetLeft == -)
  {
      clearInterval(timer);
  }
  else{
      container.style.left=container.offsetLeft-+'px';
  }
  },);
}
var alpha = ;
var timer1=null;//控制btn透明度动画的timer
function moveStart(oSpeed,oTarget){
    clearInterval(timer1);
    timer1 = setInterval(function(){
    if(oTarget == alpha){
      clearInterval(timer1);
     }
    else{
      alpha += oSpeed;
      btn.style.filter = 'alpha(opacity:'+alpha+');'
      btn.style.opacity = alpha/100.0;
     }
    },);
}