JavaScript—运动进阶—# Div 连续几个运动

最新推荐文章于 2024-10-01 20:12:28 发布

fuzuxian

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量89

点赞数 1

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/image_fzx/article/details/103794485

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

连续几个运动

文本：函数嵌套。。。递归。。。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>连续几个运动@Cookie_fzx</title>
</head>
    <style>
        #div1 {width: 100px; height:100px; background: red;  filter: alpha(opacity:30); opacity: 0.3;}
    </style>
    <script  src="StartMove.js"></script>
    <script>
            window.onload = function () {
                var oDiv = document.getElementById('div1');
                oDiv.onmouseover=function () {
                    StartMove(oDiv, 'width', 300, function () {
                        StartMove(oDiv, 'height', 300, function () {
                            StartMove(oDiv, 'opacity', 100);
                        });
                    });
                };
                oDiv.onmouseout=function () {
                    StartMove(oDiv, 'opacity', 30, function () {
                        StartMove(oDiv, 'height', 100, function () {
                            StartMove(oDiv, 'width', 100);
                        });
                    });
                };
        };
    </script>

<body>
<div id="div1"></div>
</body>
</html>

js代码：

function getStyle(obj, name) {
    if(obj.currentStyle){
        return currentStyle[name];
    }else{
        return getComputedStyle(obj, false)[name];
    }
}

function StartMove(obj, attrStyle, iTarget, fEnd) {
    clearInterval(obj.Timer);
    obj.Timer=setInterval(function () {
        //  获取样式的值
        var curStyle=0;    //   getStyle(obj,width)不对；   parseInt(getStyle(obj,'width'))对的
        if(attrStyle == 'opacity'){
            curStyle=Math.round(parseFloat(getStyle(obj, attrStyle))*100);   //  四舍五入变整数
        }else{
            curStyle=parseInt(getStyle(obj, attrStyle));
        }
        //  设置 速度
        var speed=(iTarget-curStyle)/6;
        speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);

        if(curStyle == iTarget){
            clearInterval(obj.Timer);
            if(fEnd)fEnd();               //   !!!!!!  函数内增加一个函数
        }else {

            if(attrStyle == 'opacity'){
                obj.style.filter='filter: alpha(opacity: ' + (speed+curStyle) + ')';
                obj.style.opacity= (speed+curStyle)/100;
            }else{
                obj.style[attrStyle]= curStyle+ speed + 'px';   // obj.style.attrStyle不对；   obj.style[attrStyle]对的
            }
        }
    }, 30);
    }