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. [fw]Best Practices for Exception Handling

    http://www.onjava.com/pub/a/onjava/2003/11/19/exceptions.html http://www.onjava.com/pub/a/onjava/200 ...

  2. nodejs shell

    REPL (Read-eval-print loop),即输入—求值—输出循环.如果你用过 Python,就会知道在终端下运行无参数的 python 命令或者使用 Python IDLE 打开的 sh ...

  3. MVC之查询demo

    上篇已经说过怎样建立MVC项目.这次主要讲述样例的实现. 其基本的功能就是从数据库中查询一些基本信息. 前边我们已经将实体引入到了项目中,这时Model目录中已经出现了我们建立的newsSystem. ...

  4. UVa 10315 - Poker Hands

    题目:两个人手里各有五张牌,比較两牌型大小. 比較规则例如以下:(按优先级排序,优先级同样按以下内部规则比較) 1.straight-flush:同花顺,牌面连续,花色同样,按最大的值比較. 2.fo ...

  5. PHP第五课 自己主动类型转换与流程控制

    学习概要: 1.了解自己主动类型转换的有哪些 2.了解主要的流程控制语句 3.实例:实现日历表格的写法 自己主动类型转换 1)整型转字符串 echo $num."abc"; 2)字 ...

  6. 百度LBS云搜索时报错 &quot;filter:area is not filteable field, please set property in the cloud-storage

    {"status":2,"message":"filter:area is not filteable field, please set prope ...

  7. UVa 12279 - Emoogle Balance

    题目:给你n个数字推断.零和非零数字的个数差. 分析:简单题. 读入数据非零+1.为零-1. 说明:目标650题╮(╯▽╰)╭. #include <iostream> #include ...

  8. jQuery--编辑表格

    表格操作是我们常常遇到的,还记得刚開始学习牛腩新闻公布系统时.跟着视频进行表格的一些基本操作.而对它的原理与概念全然不懂,不过跟着老师的操作而进行操作. 通过这次学习,对表格的操作有了进一步的了解与掌 ...

  9. 构建一个简单的基于MVC模式的JavaWeb

    零晨三点半了,刚刚几个兄弟一起出去吼歌,才回来,这应该是我大学第二次去K歌,第一次是大一吧,之后每次兄弟喊我,我都不想去,因为我还是很害怕去KTV,或许是因为那里是我伤心的地方,也或许是因为我在那里失 ...

  10. Codeforces Beta Round #67 (Div. 2)C. Modified GCD

    C. Modified GCD time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...