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. jQuery对象是怎么创建的

    一.jQuery源码 在jQuery中,$是jQuery的别名,执行“$()”就是执行“jQuery()”,执行“$()”返回的是一个jQuery对象,在源码中,它是这样定义的: ... var jQ ...

  2. （13）Corner Detection角点检测

    import cv2 import numpy as np img=cv2.imread('opencv-corner-detection-sample.jpg') gray = cv2.cvtCol ...

  3. N - Is It A Tree? 并查集

    A tree is a well-known data structure that is either empty (null, void, nothing) or is a set of one ...

  4. 洛谷—— P1122 最大子树和

    https://www.luogu.org/problem/show?pid=1122 题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课 ...

  5. UVA_1575

    https://vjudge.net/problem/UVA-1575 枚举答案(k)..对k质因数分解,质数的指数为cnt[i],若n==A(tot_cnt,tot_cnt) / A(cnt[i]& ...

  6. pt工具加字段脚本

    #!/bin/bashcnn_db=$1table=$2alter_conment=$3 cnn_host='192.168.10.14'cnn_user='root'cnn_pwd='123456' ...

  7. Android Studio Module 的添加与删除

    1. 添加Module(此时可以字面翻译为“模块”,意译为“其他工程”) 2. 删除Module 你要知道,Android Studio的非人性设计,导致删除一个module都是繁琐的. 当你想在An ...

  8. 【CV论文阅读】：Rich feature hierarchies for accurate object detection and semantic segmentation

    R-CNN总结 不总结就没有积累 R-CNN的全称是 Regions with CNN features.它的主要基础是经典的AlexNet,使用AlexNet来提取每个region特征,而不再是传统 ...

  9. 文章编辑器 文本替换 操作dom 发帖 富文本 今日头条发布富文本的实现 键盘化的html

    js  修改  iframe it=document.getElementById('ueditor_0').contentWindow.document.getElementsByTagName(& ...

  10. Java —— 正则表达式

    0. 注意 正则表达式里的点号(.),可以匹配除换行符之外的所有字符 Java 语言同其他语言中的正则表达式的不同在于: 对 \(反斜线)的不同处理 \\:其他语言中,表示在正则表达式中插入普通的反斜 ...