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

搞不懂哪里错了。。。

help~

TAMJING

2015-07-29

源自：JS动画效果 4-2

关注问题我要回答

1006

操作

收起

3 回答

Code_M0keny
2015-07-29

注意看line38

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

obj.attr

目测是你这个参数搞错了。应该是传递的两个参数

所以应该是

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

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

收起回答

TAMJING 提问者

哈哈哈，后来我也发现，THX~

2015-07-29 回复有任何疑惑可以回复我~

TAMJING 提问者
2015-07-29

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自主封装多功能动画框架</title>
    <style>
 ul li{
            width: 300px;;
            height: 200px;
            background: pink;
            opacity: 0.3;
        }
    </style>
    <script>
 window.onload = function(){
            // test
 var Li1 = document.getElementById('li1');
            Li1.onmousemove = function(){
                DIY_Animation(this,'opacity',100);
            }
            Li1.onmouseout = function(){
                DIY_Animation(this,'opacity',30);
            }
        }
        //获取对象obj的attr属性
 function getStyle(obj,attr){
            if(obj.currentStyle){  return obj.currentStyle[attr];}// 有错！
 else{  return getComputedStyle(obj,false)[attr];}
        }
        //可以改变宽高、背景属性、字号属性、边框属性等等
        //透明度(opacity)特殊处理，0~100为标准
//        var alpha=30;
 function DIY_Animation(obj,attr,iTarget){ //obj=对象;attr=属性;iTarget=改变的数值
 clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var icur = 0;
                if(attr == 'opacity'){
                    icur = Math.round(parseFloat(getStyle(obj.attr))*100);
                }else{  icur = parseInt(getStyle(obj,attr));}
                //获取对象obj的attr属性,parseInt()取整
 var speed = (iTarget-icur)/8;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if(icur == iTarget){  clearInterval(obj.timer);}
                else {
                    if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                        obj.style.opacity = (icur + speed) / 100;
                    } else {  obj.style[attr] = icur + speed + 'px';}
                }
            },30);
        }
    </script>
</head>
<body>
<ul>
    <li id="li1"></li>
</ul>
</body>
</html>

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

收起回答