为了账号安全,请及时绑定邮箱和手机立即绑定

求助结果有点问题!

我的目标是鼠标滑过,width=400,height=400,opactiy=1,鼠标移除,回归原样,width=200,height=200,opacity=0.3;但是我的运行出来鼠标滑过width=396,height=396,opactiy=1,移除width=204,height=204,opactiy=0.3,


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>练习链式运动</title>

<style type="text/css">

*{margin:0;  padding: 0}

div{

height:200px;

width: 200px;

background: #fc6;

filter: alpha(opacity=30);

opacity: 0.3;

}

</style>

<script src="js/js.js "></script>

<script type="text/javascript">

window.onload=function(){

var div0=document.getElementById('div0');

div0.onmouseover=function(){

startMove(this,{'width':400,'height':400,'opacity':100});

}

div0.onmouseout=function(){

startMove(this,{'width':200,'height':200,'opacity':30});

}


}

</script>


</head>

<body>

<div id="div0"></div>

</body>

</html>


function getStyle(obj, attr) {

    if (obj.currentStylt) {

        return obj.currentStyle[attr];

    } else {

        return getComputedStyle(obj, false)[attr];

    }

}


function startMove(obj, json, fn) {

    clearInterval(obj.timer);

    obj.timer = setInterval(function() {

        for (var attr in json) {

            // 获取当前值

            var icurr = 0,

                flag = true;

            if (attr == 'opacity') {

                icurr = Math.round(parseFloat(getStyle(obj, attr) * 100));

            } else {

                icurr = parseInt(getStyle(obj, attr));

            }

            // 算速度

            var speed = (json[attr] - icurr) / 6;

            speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));

            // 测试停止

            if (icurr != json[attr]) {

                flag = false;

            }

            if (attr == 'opacity') {

                obj.style.filter = 'alpha(opacity=' + (icurr + speed) + ')';

                obj.style[attr] = (icurr + speed) / 100;

            } else {

                obj.style[attr] = (icurr + speed) + 'px';

            }


        }

        if(flag){

        clearInterval(obj.timer);

        }

        if(fn){

        fn();

        }

        // 

    }, 30);

}

哪里出问题了

正在回答

1 回答

把flag=true写道for循环上面去

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

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113925    人
  • 解答问题       1443    个

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

进入课程

求助结果有点问题!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信