html部分

<!DOCTYPE html>

<html lang="en">

    <head>

        <link href="../css/default.css" rel="stylesheet">

            <script src="../js/main.js">

            </script>

            <meta charset="utf-8">

                <title>

                    Document

                </title>

                <script type="text/javascript">

                    window.onload=function(){

                        var div=document.getElementsByTagName('div');

                        for(var i=0;i<div.length;i++){

                            div[i].timer=null;

                              div[i].onmouseover = function() {

            // var _this = this;

            // var _this2 = _this;

            startMove(this, {width:400,height:400,opacity:100});

            //     startMove(_this, 400, 'height', function() {

            //         startMove(_this2, 100, 'opacity');

            //     });

            // }); //用this可以调取当前的节点对象

        };

        div[i].onmouseout = function() {

            // var _this = this;

            // var _this2 = _this;

            startMove(this,{width:200,height:200,opacity:30});

            //     startMove(_this, 200, 'height', function() {

            //         startMove(_this2, 200, 'width');

            //     });

            // }); //用this可以调取当前的节点对象

        };

                        }

};

                </script>

            </meta>

        </link>

    </head>

    <body>

        <div id="div1">

        </div>

        <div id="div2">

        </div>

    </body>

</html>

js部分

function getStyle(obj, attr) {

    if (obj.currentStyle) {

        return obj.currentStyle[attr];//针对IE获取样式

    } else {

        return getComputedStyle(obj, false)[attr];//针对非IE获取样式。

    }

} //获取样式的好处，是防止出现obj.offsetWidth与boder这样的Bug。

function startMove(obj, json, fn) { //iTarget是具体的数字，attr是宽或高或透明度之类的。json[attr]，包括2者

    clearInterval(obj.timer); //清除计时器

    obj.timer = setInterval(function() {
          var flag=true;//假设所有都到达了目标

        for (var attr in json) { //用json，这样的话，可以2个函数同时运行。

            var icur = 0;

            var speed = 0;

            if (attr == 'opacity') {

                icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //这里获取到的是透明度

            } else {

                icur = parseInt(getStyle(obj, attr)); //因为获取到的宽或者高是小数，所以需要强制转换下,这里获取到的是宽高之类的

            } /*上面部分是获取具体的值，及是否是透明度*/

            speed = (json[attr] - icur) / 8; //因为这里的attr不能直接代表obj.offsetLeft,要用样式去获取.

            //json[attr]代替iTarget《==》speed=(iTarget-obj.offsetLeft)/8

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

            if(json[attr] != icur) {

               flag=false;

            }
             if(attr == 'opacity') {

                    obj.style[attr] = (icur + speed) / 100; //icur+speed是当前的透明度加上变化的速度

                    obj.style.filter = 'alpha(opacity' + (icur + speed) + ')';

                } else {

                    obj.style[attr] = icur + speed + 'px';

                }
              if(flag) {

                clearInterval(obj.timer);

                if (fn) {

                    fn(); //如果有回调函数就执行回调函数。

                }

            }

        }

    }, 30);

}

css部分

* {

    margin:;

    padding: 0

}

div {

    width: 200px;

    height: 200px;

    filter: alpha(opacity:30);//针对IE的透明度

    opacity: 0.3;//非IE的透明度

    background: blue;

    margin-bottom: 20px;

}

js  分4部分

1.判断类型，是透明度还是宽或者高

2.算运动速度

3.检测停止

4.清除计时器

JS动画完美框架的更多相关文章

  1. Hexo - 快速，轻量，强大的 Node.js 博客框架

    Hexo 是一个快速,轻量,强大的 Node.js 博客框架.带给你难以置信的编译速度,瞬间生成静态文件:支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件:只需要一个命令 ...

  2. js动画学习（五）

    九.多属性同时运动 前面的例子都是每个属性单独运动,如果想要多属性同时运动怎么办?比如,我想要一个div的onmouseover事件中宽和高同时变化.下面这个函数是单独变宽: window.onloa ...

  3. js动画（四）

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  4. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  5. 转 10 个最佳的 Node.js 的 MVC 框架

    10 个最佳的 Node.js 的 MVC 框架 oschina 发布于: 2014年02月24日 (33评) 分享到:    收藏 +322 Node.js 是一个基于Chrome JavaScri ...

  6. Android动画学习(一)——Android动画系统框架简介

    2015-11-09补充:Drawable Animation极有可能是Frame Animation 这几天在找工作,面试的时候被问到了Android动画,之前完全没接触过这部分,直接给懵了,当然其 ...

  7. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  8. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  9. CSS VS JS动画，哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

随机推荐

  1. Maven将本地项目打包后引入本地另一个项目

    进入需要打包的文件夹,执行:mvn clean install -X 生成JAR包 打完JAR包后,将maven依赖安装 执行命令: install:install-file -Dfile=E:\co ...

  2. Android源码的git下载地址

    git clone https://android.googlesource.com/device/common.git    git clone https://android.googlesour ...

  3. NOIp2018集训test-9-19(am&pm)

    AM 这是一套在长沙考过而且我能记得全部正解的题,然后期望得分300实际得分155. T1 很套路,随便搞(我当年是怎么花大半场时间写T1并且写出现在两倍长的代码的??) //Achen #inclu ...

  4. 制作windows puppet openstack镜像

    由于电信需要远程部署软件,拟使用puppet进行远程服务管理 前提 windows系统已经安装 windows已经安装virtio driver 远程桌面开启,最好关闭防火墙 设置MTU 在没有安装c ...

  5. Codeforces 1166B - All the Vowels Please

    题目链接:http://codeforces.com/problemset/problem/1166/B 个元音. 思路:先判断能否弄出至少5*5的行列,然后按顺序填字符串就好了. AC代码: #in ...

  6. 『BASH』——Learn BashScript from Daniel Robbins——[003]

    ABSTRACT: Daniel Robbins is best known as the creator of Gentoo Linux and author of many IBM develop ...

  7. Array类型中的检测数组，转换方法，栈方法，队列方法

    我的新博客==> http://www.suanliutudousi.com/2017/08/24/array%E7%B1%BB%E5%9E%8B%E4%B8%AD%E7%9A%84%E6%A3 ...

  8. Palindrome Partition CodeForces - 932G 回文树+DP+(回文后缀的等差性质)

    题意: 给出一个长度为偶数的字符串S,要求把S分成k部分,其中k为任意偶数,设为a[1..k],且满足对于任意的i,有a[i]=a[k-i+1].问划分的方案数. n<=1000000 题解: ...

  9. 【ASP.Net Core】不编译视图文件

    原文:[ASP.Net Core]不编译视图文件 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/aqtata/article/details/818 ...

  10. 从虚拟地址，到物理地址（开PAE）

    学了好久好久,但是好久好久都没有用过,今天突然要用,都快忘了怎么玩了, 这里记录一下吧. 如何检测PAE r cr4 第5位如果是1,则开了PAE,否则没开 切入目标进程 查找一个自己关注的字符串s ...