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. leetcood学习笔记-58-最后一个单词的长度

    题目描述: 第一次解答: class Solution: def lengthOfLastWord(self, s: str) -> int: L=s.strip().split(" ...

  2. JAVA call dll

    { System.loadLibrary():装载Windows\System32下或jre\bin或Tomcat\bin目录下的本地链接库 System.load():根据具体的目录来加截本地链接库 ...

  3. PHP ftp_set_option() 函数

    定义和用法 ftp_set_option() 函数设置 FTP 连接的各种运行时选项. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE. 语法 ftp_set_option(ftp_co ...

  4. 依赖背包优化——hdu1561

    傻逼依赖背包的优化 #include<bits/stdc++.h> using namespace std; #define N 205 ]; int head[N],tot,n,m,a[ ...

  5. php-fpm 服务

    编译安装PHP的时候已经加入了--enable-fpm 在此基础上启动php-fpm服务 cp /usr/local/php/etc/php-fpm.conf.default /usr/local/p ...

  6. 在myeclipse安装beyond插件

    目录 文章背景 目录 环境介绍 安装步骤 说明 参考文章 版本记录 文章背景 myeclipse自带的比较工具感觉是有一些看不清晰,也不是太方便处理,然后就找了个比较插件了. 目录 环境介绍 myec ...

  7. Delphi实现屏幕截图、窗口截图、指定区域截图

    Use Jpeg procedure TForm1.snapscreen(a,b,c,d:Integer); var bmpscreen:Tbitmap; jpegscreen:Tjpegimage; ...

  8. mac 安装并使用 mysql 或者 mac mysql 忘记密码，Can't connect to local MySQL server through socket homebrew

    1. brew install mysql 2. 启动mysql mysql.server start 我遇到了这个error,查openstack解决,我在这粘一下 ### Error:Can't ...

  9. hive表操作（转）

    转载于:http://blog.csdn.net/lovelovelovelovelo/article/details/52234971 数据类型 基本数据类型 集合类型,array.map.stru ...

  10. 简单实用的makefile

    简单的makefile 为了说明问题,就新建一组文件如下: 文件布局及运行结果: make clean 按目录归置 文件看起来是是清楚了,但是makefile写得揪心. 实用版 (1)Makefile ...