zoukankan      html  css  js  c++  java
  • JavaScript “完美运动框架”

    /* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move()。
     * 大致结构如下:运动框架 EXP: move(obj,{200,height:200},fnEnd)
     *         obj: 运动物体
     *         json: 运动属性和运动目标值的json集合,{'width':200,'height':200}
     *         sv: 运动的速度,speed-value,值越小速度越大
     *         fnEnd: 运动结束后的回调函数
     */
    
    function move(obj, json, sv, fnEnd) {
        //取CSS样式值
        function getStyle(obj, attr) {
                if (obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                }
            }
            //运动开始          
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var isAllCompleted = true; //假设全部运动都完成了
            for (attr in json) {
                var attrValue = 0;
                switch (attr) {
                    case 'opacity':
                        attrValue = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                        break;
                    default:
                        attrValue = parseInt(getStyle(obj, attr));
                }
                //如果没有传入sv,则为4
                var speed = (json[attr] - attrValue) / (sv || 4);
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                //如果循环过程中存在尚未结束的运动,isAllCompleted为假
                if (attrValue != json[attr]) isAllCompleted = false;
                switch (attr) {
                    case 'opacity':
                        {
                            obj.style.filter = "alpha(opacity=" + (attrValue + speed) + ")";
                            obj.style.opacity = (attrValue + speed) / 100;
                        };
                        break;
                    default:
                        obj.style[attr] = attrValue + speed + 'px';
                }
            } //for in end!
            //所有循环结束后,只有当全部运动结束后(isAllCompleted=true)时才关闭定时器
            if (isAllCompleted) {
                clearInterval(obj.timer);
                if (fnEnd) fnEnd();
            }
        }, 30);
    } //move() end !

    来自 <http://www.tangbc.com/blog/#frontends/104

  • 相关阅读:
    微服务实战(三):深入微服务架构的进程间通信
    微服务实战(二):使用API Gateway
    微服务实战(一):微服务架构的优势与不足
    函数声明与函数表达式
    CSS样式优先级
    iframe框架及优缺点
    JS事件流模型
    JS事件冒泡及阻止
    浏览器重绘与回流
    浏览器渲染与内核
  • 原文地址:https://www.cnblogs.com/blog-leo/p/4507747.html
Copyright © 2011-2022 走看看