等待已久的可变大,变宽 等一系列效果运动框架出炉了，现在还是个初级版本，能满足需求。我们看看是如何实现的。

我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如： oDiv.style.height=oDiv.style[‘height’]

那么，我们把要运动的属性作为一个参数，传入到之前函数中即可。

透明度呢，需要单独处理，判断下即可。

直接上代码。

<style type="text/css">

            div {

                width: 200px;

                height: 200px;

                margin: 20px;

                float: left;

                background: yellow;

                border: 1px solid #CCCCFF;

                filter: alpha(opacity=30);

                opacity: 0.3;

            }

        </style>
<body>

        <div id="div1"></div>

    </body>

以下是Javascript代码：

<script type="text/javascript">

            window.onload = function() {

                var oDiv1 = document.getElementById("div1");

                oDiv1.onmouseover = function() {

                    startMove(this, 'opacity', 100);

                };

                oDiv1.onmouseout = function() {

                    startMove(this, 'opacity', 30);

                };

            }

            function getStyle(obj, name) {

                if (obj.currentStyle) {

                    return obj.currentStyle[name];

                } else {

                    return getComputedStyle(obj, null)[name];

                }

            }

            function startMove(obj, attr, iTarget) {

                clearInterval(obj.time);

                obj.time = setInterval(function() {

                    var cur = 0;

                    if (attr == 'opacity') {

                        cur=parseFloat(getStyle(obj, attr)) * 100;

                    } else {

                        cur = parseInt(getStyle(obj, attr));

                    }

                    var speed = (iTarget - cur) / 6;

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

                    if (cur == iTarget) {

                        clearInterval(this.time);

                    } else {

                        if (attr == 'opacity') {

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

                            obj.style.opacity = (cur + speed) / 100;

                        } else {

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

                        }

                    }

                }, 30);

            }

        </script>

结合之前的博文中的知识，相信里面的一些计算原理大家都了如指掌，无需多说了吧。不懂可以回顾下之前的文章。

那么 这个运动框架到目前为止就没问题了吗？

不要急 这个还是有问题的 在IE7 下就会出现bug 。。 怎么会事呢 。

其实Javascript 中的运算是有误差的，alert(0.07*100);  // 7.000000000….1

那么我们的代码中 parseFloat(getStyle(obj, attr)) * 100这句就会有误差。

这个问题怎么解决呢？？

其实很简单，用 Math.round() ;   改掉相应的代码

cur=parseFloat(getStyle(obj, attr)) * 100;

改成 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); 即可

原理就是把小数干掉，留下整数的部分就可以了。

Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码，让你轻松了解运动的原理的更多相关文章

  1. Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  2. Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...

  3. Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理

    看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...

  4. Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...

  5. Javascript 运动中Offset的bug——逐行分析代码，让你轻松了解运动的原理

    我们先来看看这个bug 是怎么产生的. <style type="text/css"> #div1 { width: 200px; height: 200px; bac ...

  6. Javascript 匀速运动停止条件——逐行分析代码，让你轻松了解运动的原理

    我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug.这里加了两个标杆用于测试 <style type="text/css"> #div1 ...

  7. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  8. Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  9. Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...

随机推荐

  1. 网易云数据结构- Maximum Subsequence Sum

    题目 题目地址 思路 显然是最大子列和的进化版,那就先思考下经典的最大子列和.这也是道思维题,啥算法也没用到,全是思维技巧,真心不知道考试遇到这种题该怎么办了. 存放答案的一个类,我把它看成一个袋子, ...

  2. 原生化：AnDevCon 2014 McVeigh 的主题演讲

    作者:Jeff McVeigh(Intel) 基于(至少部分)NDK的原生安卓应用程序占现在前1000 强的 60% 以上.该增长的原因很简单:开发商需要为用户提供超卓的体验(包括灵敏的反应.与丰富的 ...

  3. 使用SelectClipRgn注意事项

    SelectClipRgn 函数功能:该函数选择一个区域作为指定设备环境的当前剪切区域. 函数原型:int SelectClipRgn(HDc hdc, HRGN hrgn): 参数: hdc:设备环 ...

  4. IT技术 | 让程序员抓狂的排序算法教学视频

    点击「箭头所指处」可快速关注传智特刊微信号:CZTEKAN 原文地址:http://mp.weixin.qq.com/s?__biz=MjM5OTM4NDMyMg==&mid=20056820 ...

  5. [Leetcode][Python]52: N-Queens II

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 52: N-Queens IIhttps://oj.leetcode.com/ ...

  6. java MongoDB driver error infos

    DataTables warning: table id=dateTable - Ajax error. For more information about this error, please s ...

  7. Object-C自定义对象NSLog输入信息

    http://blog.cnrainbird.com/index.php/2012/07/19/object-c_zi_ding_yi_dui_xiang_nslog_shu_ru_you_yong_ ...

  8. hdu 5506 GT and set（dfs爆搜）

    Problem Description You are given N sets.The i−th set has Ai numbers.You should divide the sets into ...

  9. KMP快速模式匹配的java实现

    假期实在无聊赖啊.把这个算法实现了一下即算是打发时间也算练练手了. KMP算法的关键是用归纳法计算失败函数.网上很详细了.下面直接给出代码. /** * * @author Vincent * */ ...

  10. javascript 事件处理

    [写在前面]近期一直在看js的基础,毕竟jquery尽管好用,总归是用着别人写的,仅仅会用api不如搞清楚实现的原理. 等把js基础巩固好了一定要去读jquery的源代码. 事件流 事件流描写叙述的是 ...