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. 使用canvas绘制6X6调色盘

    <canvas id="canvas" height="150" width="150"></canvas> var ...

  2. Go 算术运算符

    Go 算术运算符 package main import "fmt" func main() { var a int = 21 var b int = 10 var c int c ...

  3. DELPHI 异形窗体

    一定有很多人看到过一些奇形怪状的窗体,例如一些屏幕精灵.其实实现起来非常容易,做到三点就好啦.下面我使用Delphi做了一个VCL控件(TBmpShape),你只需要指定一幅图片就可以将窗体变成你的图 ...

  4. easyUI tabs 显示与隐藏 tab 页

    隐藏: tab_option = $('#tabs').tabs('getTab'," 单位信息 ").panel('options').tab; tab_option.hide( ...

  5. "Access denied for user 'root@localhost' 试一下你的mysql是不是用任何密码都可以登录，如果是的话这里

    https://blog.csdn.net/light_breeze/article/details/82070222 花了三小时...竟然是因为这个

  6. Codeforces 1182A Filling Shapes

    题目链接:http://codeforces.com/problemset/problem/1182/A 思路:n为奇数时不可能完全填充,ans = 0.发现若要完全填充,每俩列可产生俩种情况,所以为 ...

  7. 剑指offer——01数组中重复的数字

    题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...

  8. String类的substring()方法

    截取字符串,在java语言中的用法 1.  public String substring(int beginIndex) 返回一个新字符串,它是此字符串的一个子字符串.该子字符串始于指定索引处的字符 ...

  9. 20140422 ALT+F8 四个强制类型转换

    一.static_cast, dynamic_cast, const_cast http://www.cnblogs.com/chio/archive/2007/07/18/822389.html h ...

  10. 解析css3 shake 抖动样式

    前端时间做项目发现一抖动按钮挺吸引眼球的,研究了下实现原理,在此和大家分享下: CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的 ...