我的链式动画这么没有反应-慕课网

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

我的链式动画这么没有反应

来源：6-1 同时运动

慕妹6355885

2016-10-18 16:42

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>

  <style>
   #li1{width: 200px;height: 100px;opacity: 0.3;background :brown;}
  </style>
  

</head>
<body>
  <div id="li1">
  </div>
<script src="js/lianshi.js"></script>
<script type="text/javascript">
  window.onload=function(){
   var ll=document.getElementById('li1');
   ll.onmouseover=function(){
             starMove(ll,'width',600,function(){
             starMove(ll,'height',400,function(){
               starMove(ll,'opacity',100);
             });
             });

   };
   ll.onmouseout=function(){
    starMove(ll,'opacity',30,function(){
     starMove(ll,'height',100,function(){
      starMove(ll,'width',200);
     });
    });
   };
  };
</script>
</body>
</html>

//封装一个获取样式的方法
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}

function starMove(obj, json, fn) {
//假设
var flag = null
clearInterval(obj.timer);
obj.timer = setInterval(function() {
  //假设所有动作都已完成成立
  for (var attr in json) {
   //取当前值
   var icur = 0;
   if (attr == 'opacity') {//判断传入参数是否为透明度
    icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
   } else {
    icur = parseInt(getStyle(obj, attr))
   }
   //算速度
   var spend = (json[attr] - icur) / 8;
   spend = spend > 0 ? Math.ceil(spend) : Math.floor(spend);
   //检测停止
   if (icur != json[attr]) {
    flag = false;
   }else{
    flag = true
   }
   if (attr == 'opacity') {
    obj.style.filter = "alpha(opacity:'+(icur+spend)+')";
    obj.style.opacity = (icur + spend) / 100;
   } else {
    obj.style[attr] = icur + spend + 'px';
   }

  }
  if (flag) {
   clearInterval(obj.timer)
   if (fn) {
    fn();
   }
  }
}, 30)
}

写回答关注

1回答

qq_MrRaindrop_03830215

2016-10-19 15:34:31

没有细看。但是感觉应该是{“opacity”，"30"}这个样子。

0 0

JS动画效果

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

113931 学习 · 1443 问题

相似问题

为什么我无法显示链式动画？

回答 5

关于速度动画的问题，没反应

回答 3

怎么实现多物体链式动画

回答 2

我的多物体运动没有反应啊。

回答 1

这段代码怎么就无法实现链式动画

回答 1

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