1、opacity问题：IE678支持filter: alpha(opacity=50)取值1-100；小数位容易精度丢失，所i有统一json字符串设置为百进制，赋值时除以100

2、zIndex问题：层级不需要徐徐渐进值的递增或者递减，而是一下赋值到目标值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            position: absolute;

            top: 40px;

            left: 0px;

            width: 100px;

            height: 100px;

            background-color: pink;

        }

    </style>

</head>

<body>

<button>运动到400</button>

<div></div>

<script>

    //原来的缓动框架在个别属性的获取上是有问题的

    //opacity：最好是百分制

    //zIndex：

    var btnArr = document.getElementsByTagName("button");

    var div = document.getElementsByTagName("div")[0];

    console.log(getStyle(div, "opacity") || 100);

    btnArr[0].onclick = function () {

        var json1 = {"left": 300, "top": 200, "width": 300, "height": 200, "opacity": 30, "zIndex": 1};

        var json2 = {"left": 0, "top": 40, "width": 100, "height": 100, "opacity": 100, "zIndex": 2};

        animate(div, json1, function () {

            animate(div, json2);

        });

    }

    //参数变为2个，将属性atrr和值都存储到json中

    function animate(ele, json, fn) {

        //先清定时器

        clearInterval(ele.timer);

        ele.timer = setInterval(function () {

            //开闭原则

            var bool = true;

            //遍历属性和值，分别单独处理json

            //attr == k(键)    target == json[k](值)

            for (var k in json) {

                //四部

                var leader;

                //判断如果属性为opacity的时候特殊获取值

                if (k === "opacity") {

                    leader = getStyle(ele, k) * 100 || 100;

                } else {

                    leader = parseInt(getStyle(ele, k)) || 0;

                }

                //1.获取步长

                var step = (json[k] - leader) / 10;

                //2.二次加工步长

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

                leader = leader + step;

                //3.赋值

                //ele.style[k] = leader + "px";

                //特殊情况特殊赋值

                if (k === "opacity") {

                    ele.style[k] = leader / 100;

                    //兼容IE678

                    ele.style.filter = "alpha(opacity=" + leader + ")";

                    //如果是层级，一次行赋值成功，不需要缓动赋值

                    //为什么？需求！

                } else if (k === "zIndex") {

                    ele.style.zIndex = json[k];

                } else {

                    ele.style[k] = leader + "px";

                }

                //4.清除定时器

                //判断: 目标值和当前值的差大于步长，就不能跳出循环

                //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。

                // if (json[k] !== leader) {

                //     bool = false;

                // }

                if (Math.abs(json[k] - leader) > Math.abs(step)) {

                    bool = false;

                }

            }

            console.log(1);

            //只有所有的属性都到了指定位置，bool值才不会变成false；

            if (bool) {

                for (k in json) {

                    if (k === "opacity") {

                        ele.style[k] = json[k] / 100;

                        ele.style.filter = "alpha(opacity=" + leader + ")";//兼容IE678

                    } else if (k === "zIndex") {

                        ele.style.zIndex = json[k];

                    } else {

                        ele.style[k] = json[k] + "px";

                    }

                }

                clearInterval(ele.timer);

                //所有程序执行完毕之后执行回调函数

                //现在只有传递了回调函数，才能执行

                if (fn) {

                    fn();

                }

            }

        }, 25);

    }

    //兼容方法获取元素样式

    function getStyle(ele, attr) {

        if (window.getComputedStyle) {

            return window.getComputedStyle(ele, null)[attr];

        }

        return ele.currentStyle[attr];

    }

</script>

</body>

</html>

JS——缓动框架的问题的更多相关文章

  1. JS特效@缓动框架封装及应用

    | 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.变量CSS样式属性获取/赋值方法 给属性赋值:(既能获取又能赋值) 1)div.style.width 单个赋值:点语法,这个方法比较固定 ...

  2. JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、

    缓动函数中opcity  写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...

  3. thwen 缓动框架

    描述 目前提供一个方法 ele 元素对象 obj 操作 duration 时间 effect 缓动选择 thwenMove(option) 框架支持以下缓动策略 -指数衰减的正弦曲线缓动 -圆形曲线的 ...

  4. tween.js缓动（补间动画）

    一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开 ...

  5. js缓动函数

    tween: { easeInQuad: function(pos){ return Math.pow(pos, 2); }, easeOutQuad: function(pos){ return - ...

  6. JS——缓动动画

    核心思想: (1)相对于匀速移动,盒子每次移动的步长都是变化的,公式:盒子位置=盒子本身位置+(目标位置-盒子本身位置)/10 (2)在盒子位置与目标距离小于10px时,其步长必然是小数,又由于off ...

  7. 利用tween.js算法生成缓动效果

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

  8. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  9. window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

    window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...

随机推荐

  1. SecureCRT复制粘贴快捷键

    复制:[Ctrl]+[Insert] 粘贴:[Shift]+[Insert]

  2. JSP计数器

    1.JSP弥补了servlet页面显示的不足:jsp运行时候需要转化为servlet,本质上就是servlet:tomcat下的work目录下有jsp的servlet和对应的class文件;下次再调用 ...

  3. leetcode_Product of Array Except Self

    描写叙述: Given an array of n integers where n > 1, nums, return an array output such that output[i]  ...

  4. Ubuntu 12.04 LTS 无法进入桌面环境

    今天开机后,在登陆的时候,进入了登陆界面(选择用户,输入密码的那个界面),输入正确的密码后屏幕跳转了一下,但是很快又回到了登陆界面.然后我就尝试以guest [访客]的身份登陆,发现进入了桌面系统. ...

  5. Android资源之图像资源（图像级别资源）

    图像状态资源仅仅能定义有限的几种状态. 假设须要很多其它的状态,就要使用图像级别资源. 在该资源文件里能够定义随意多个图像级别. 每一个图像级别是一个整数区间,能够通过ImageView.setIma ...

  6. opencv中RGB转HSV

    cvCvtColor(src,dst,CV_BGR2HSV); 当中,src为三通道的,dst也为三通道的. OPENCV 中 H.S.V.顺序分别为3*x+0  3*x+1   3*x+2 open ...

  7. android学习笔记:adb更换端口后成功启动

    搭建手机开发环境,android ADT,android SDK,然后按照PhoneGap官网的指引,拷贝文件,修改代码,运行,进度条到了某个位置后就停止不动了. 停止不动,又是停止不动.你都不知道问 ...

  8. UVA1601 The Morning afther Halloween

    题目大意 w h (w, h <= 16)的网格有 n ( n <= 3) 个小写字母(代表鬼)其余的是‘#’(代表障碍格) 或 ‘ ’(代表空格. 要求把他们移动到对应的大写字母里.每步 ...

  9. js的类库

    prototype.js https://github.com/sstephenson/prototype moment js https://github.com/moment/moment thr ...

  10. 【POJ 1716】 Integer Intervals

    [题目链接] 点击打开链接 [算法] 差分约束系统 [代码] #include <algorithm> #include <bitset> #include <cctyp ...