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. wpf 解决 WPF SelectionChanged事件向上传递造成重复执行不想执行的函数的问题

    例如 tabcontrol里有一个tabitem tabitem里有一个combox和一个datagrid tabcontrol combox datagrid都有SelectionChanged事件 ...

  2. 扩展欧几里得原理的应用：POJ1061青蛙的约会

    /* POJ 1061: 青蛙的约会 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 123709 Accepted: 26395 ...

  3. Java中的线程Thread方法之---join()

    上一篇我们说到了Thread中的stop方法,这一篇我们再来看一下方法join的使用,那么方法Join是干啥用的? 简单回答,同步,如何同步? 怎么实现的? 下面将逐个回答. join方法从字面上的意 ...

  4. Invalid bound statement (not found): com.my.demo.mapper.UserMapper.getAll

    网上的方法全试了,配置全对,很奇怪. 最后一查,竟然忘记把mapper保存为xml格式. 记录一下.

  5. spring-boot-configuration-processor

    spring默认使用yml中的配置,但有时候要用传统的xml或properties配置,就需要使用spring-boot-configuration-processor了 引入pom依赖 <de ...

  6. 20140401 cudaHOG代码

    1.cudaHOG代码(删减没有必要的目录) cudaHOGDetect需要boost库:boost_date_time-vc100-mt-1_40.lib VC++目录->附加库目录D:\bo ...

  7. React:JS中的this和箭头函数

    JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中 ...

  8. ## jvm知识点零碎整理

    1.初始化VM options配置 idea安装目录\bin\idea.exe.vmoptions 和 idea64.exe.vmoptions可以看到初始配置: -Xms128m  (设置初始化堆内 ...

  9. Spring MVC入门示例（1）

    1.新建一个Java Web项目 2.导入jar包 3.在WEB-INF下面建一个hello.jsp页面. 1 <%@ page language="java" import ...

  10. Xpath-Assertion断言