                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

我想看实例的代码代码呢？

为什么没有实例代码

苦闷di才华

2018-03-04

源自：JS动画效果 2-1

关注问题我要回答

1390

操作

收起

2 回答

苦闷di才华提问者
2018-03-04

谢谢后呀

0 回复有任何疑惑可以回复我~

收起回答

五趾的鱼
2018-03-04

<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>送你了 </title>
</head>
<style>
#div1{
   width:300px;
   height:300px;
   background:red;
   filter: alpha(opacity:30);
   opacity:0.3;
}
</style>
<script>
window.onload=function(){
   var oDiv=document.getElementById('div1')
   oDiv.onmouseover=function(){
       startMove(100)
   }
   oDiv.onmouseout=function(){
       startMove(30)
   }
}
var alpha=30;
var timer='null';
function startMove(iTarget){
   var oDiv=document.getElementById('div1')
   clearInterval(timer)
   //开启一个定时器
   timer=setInterval(function(){
      var speed=0;

      if(alpha<iTarget){
         speed=10;
      }
      else{
         speed=-10;
      }

      if(alpha==iTarget){
         //停止这个定时器
         clearInterval(timer)
      }
      else{
         alpha+=speed;

         oDiv.style.filter='alpha(opacity:'+alpha+')';
         oDiv.style.opacity=alpha/100;
      }

   },30)
}
</script>
<body>
<div id='div1'>
</div>
</body>
</html>