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

fn的透明度报错并且没有变化

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background: blueviolet;
}
</style>
<script src="startmove.js"></script>
<script>
window.onload=function () {
var ax1=document.getElementsByTagName('div');
for (var i=0;i<ax1.length;i++){
ax1[i].onmouseover=function () {
startMove(this,{width:200,height:200},function () {
startMove(this,{opacity:30})
});
};
ax1[i].onmouseout=function () {
startMove(this,{width:100,height:100})
}
}
}
</script>
</head>
<body>
<div id="li"></div>
<div></div>
<div></div>
</body>
</html>

慕粉3173457

2016-05-13

源自：JS动画效果 6-2

关注问题我要回答

649

操作

收起

2 回答

啊啊啊啊123
2016-07-15

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       div{
           width: 100px;
           height: 100px;
           background: blueviolet;
           margin-bottom: 20px;
       }
   </style>
   <script>
       window.onload=function () {
           var ax1=document.getElementsByTagName('div');
           for (var i=0;i<ax1.length;i++){
               ax1[i].onmouseover=function () {
                var _this = this;
                   startMove(_this,{width:200,height:200},function () {
                       startMove(_this,{opacity:30})
                   });
               };
               ax1[i].onmouseout=function () {
                var _this = this;
                   startMove(_this,{width:100,height:100})
               }
           }
       }
       function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer=setInterval(function () {
       var flg =true;  //假设所有动作已经完成
       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 speed = 0;
           speed = (json[attr] - icur) / 8;
           speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
           //检测停止
           if (icur != json[attr]) {
               flg=false;
           }
           if (attr == 'opacity') {
                   //针对IE浏览器
                   obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                   //针对其他
                   obj.style.opacity = (icur + speed) / 100;
               }
               else {
                   obj.style[attr] = icur + speed + 'px';
               }
            }
       if (flg){
           clearInterval(obj.timer);
           if (fn){
               fn()
           }
       }
   },30)
}
function getStyle(obj,attr){
   if (obj.currentStyle){
       return obj.currentStyle[attr];
   }
   else{
       return getComputedStyle(obj,false)[attr];
   }
}
   </script>
</head>
<body>
<div id="li"></div>
<div></div>
<div></div>
</body>
</html>

其实还是this的问题

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

收起回答

zj5649799
2016-05-15

startMove(this,{width:200,height:200},function () {
startMove(this,{opacity:30})你的这个不能这样写啊，要写成 startMove(this,{width:200,height:200,opacity:30});传参的时候json直接就完成了啊，最后一个是回调函数，不能这样调用的！