JavaScript运动框架(三):多物体任意值运动

前面两篇都是单物体的运动,本文开始讲多物体的运动,比如多个div的各自不同的属性如宽,高,字体大小,透明度的缓冲运动变化。

从本文起,就不再使用offsetWdith,offsetHeight了等等,因为会出现问题,比如加个border,offsetWidth就会出现严重问题,参见我个人的博客JavaScript中offsetWidth的’bug’及其对策解决方案就是封装getStyle(obj, attr) 函数,用了获取运动中的当前值!

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

既然是各个物体各自运动,那么他们之间有些变量就不能共享,比如定时器,每个对象都应有自己的定时器,因为每次启动定时器的时候先要清除上一个定时器,这就导致如果第一个物体还在运动,就把鼠标移动到第二个物体,瞬间清除上个定时器,导致第一个物体的运动不能运动到目标值就停下


另外,物体运动的样式,基本上就两类:一类是大小也就是px为单位的属性,还有一类就是透明度!


<html>
<head>
    <meta charset="utf-8">
    <title>运动框架(三):多物体运动title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 10px;
            float: left;
            filter: alpha(opacity:100);
            opacity: 1;
        }
    style>
head>
<body>
    <div id="div1">变高div>
    <div id="div2">变宽div>
    <div id="div3">fontSize Changeddiv>
    <div id="div4">alphadiv>

    <script type="text/javascript">
        var doc = document;
        var oDiv1 = doc.getElementById('div1');
        oDiv1.onmouseover = function() {
            startMove(this, 'height', 300);
        };
        oDiv1.onmouseout = function() {
            startMove(this, 'height', 100);
        };

        var oDiv2 = doc.getElementById('div2');
        oDiv2.onmouseover = function() {
            startMove(this, 'width', 300);
        };
        oDiv2.onmouseout = function() {
            startMove(this, 'width', 100);
        };

        var oDiv3 = doc.getElementById('div3');
        oDiv3.onmouseover = function() {
            startMove(this, 'fontSize', 30);
        };
        oDiv3.onmouseout = function() {
            startMove(this, 'fontSize', 16);
        };

        var oDiv4 = doc.getElementById('div4');
        oDiv4.onmouseover = function() {
            startMove(this, 'opacity', 30);
        };
        oDiv4.onmouseout = function() {
            startMove(this, 'opacity', 100);
        };


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

        function startMove(obj, attr, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var cur = 0;
                if (attr === 'opacity') {
                    cur = parseFloat(getStyle(obj, attr)) * 100;
                } else {
                    cur = parseInt(getStyle(obj, attr));
                }
                var speed = (iTarget - cur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (iTarget == cur) {
                    clearInterval(obj.timer);
                } else {
                    if (attr === 'opacity') {
                        cur += speed;
                        obj.style.filter = 'alpha(opacity:' + cur + ')';
                        obj.style.opacity = cur / 100;//FireFox && Chrome
                    } else {
                        cur += speed;
                        obj.style[attr] = cur + 'px';           
                    }

                }
            }, 30);
        }

    script>
body>
html>

JavaScript运动框架(三):多物体任意值运动_第1张图片


JavaScript运动框架(三):多物体任意值运动_第2张图片


JavaScript运动框架(三):多物体任意值运动_第3张图片


JavaScript运动框架(三):多物体任意值运动_第4张图片

你可能感兴趣的:(前端,JavaScript运动框架)