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. BeanFactory 和 ApplicationContext 区别

    区别 BeanFactory: Spring里面最低层的接口,提供了最简单的容器的功能,只提供了实例化对象和拿对象的功能 BeanFactory在启动的时候不会去实例化Bean,中有从容器中拿Bean ...

  2. 【RabbitMQ】六种模式与SpringBoot整合

    添加rabbitmq的依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...

  3. 排列+函数映射——hdu6038好题

    /* 引理:[0,n-1]的排列,i向a[i]连边,那么每个数必定在一个环中 所以数组a可以分割成一些环,数组b也可以分割成一些环 先讨论a的一个环 a[a1]=a2 a[a2]=a3 a[a3]=a ...

  4. DELPHI 让子窗体显示在任务栏上

    重载 CreateParams 方法即可 声明: procedure CreateParams(var Params: TCreateParams);override; procedure TForm ...

  5. NX二次开发-将信息窗口中的文本保存到文本文件中UF_UI_save_listing_window

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //打开信息窗口 UF_UI_open_listing_window() ...

  6. NXOpenC#_Training_intro(cn)【转载】

  7. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  8. APIHOOK

    #include <stdio.h> #include <windows.h> #include <Dbghelp.h> #pragma comment(lib,& ...

  9. JVM内核-原理、诊断与优化学习笔记（十一）：JVM字节码执行

    文章目录 javap javap 举个

  10. linux mysql 远程访问权限问题

    1.为了让访问mysql的客户端的用户有访问权限,我们可以通过如下方式为用户进行授权:mysql> grant all on *.* to user_name@'%' identified by ...