我想看实例的代码代码呢？-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：2-1 JS速度动画

苦闷di才华

2018-03-04 15:49

为什么没有实例代码

写回答关注

2回答

苦闷di才华

2018-03-04 17:47:38

谢谢后呀

0 0

五趾的鱼: 2018-03-04 17:33:23

<!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>

0 0

JS动画效果

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题

好想看看，css样式的代码。

回答 3

我的代码只动div呢

回答 4

我的代码哪里有错呢？我怎么排除都实现不了。

回答 2

能吧代码发上来么；没代码看

回答 4

求代码代码

回答 3

打开慕课网App查看更多内容