我们先来看看这个bug 是怎么产生的。

<style type="text/css">

            #div1 {

                width: 200px;

                height: 200px;

                background: red;

            }

        </style>
<body>

        <div id="div1">

        </div>

    </body>

以下是用来测试的Javascript代码 ，目的是 让div慢慢变窄。

<script type="text/javascript">

            setInterval(function(){

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

                oDiv.style.width=oDiv.offsetWidth-1+'px';

            },30);

        </script>

Javascript 代码 很简单，运行一下 没有任何问题，如愿的div在慢慢变小。

那这个offset 的bug又是怎么来的呢？

下面我们动动样式 就会神奇的事情发生了。。。

我们给div1 加个样式 border: 1px solid #CCCCFF;

<style type="text/css">

            #div1 {

                width: 200px;

                height: 200px;

                background: red;

                border: 1px solid #CCCCFF;

            }

        </style>

此时在运行代码 ，发现div 居然往右边慢慢增大。。。 BUG 惊现。。。。 明明是减1 为什么会出现这种情况。

让我们想想offset 有什么特点：

举例： div width : 200px  border 1px  。 实际上他得到的offsetWidth 是202px 。

那么，我们说回来，运动刚开始的时候，实际上div 的宽度是200px  那么offsetWidth 是202

这个时候 oDiv.style.width=oDiv.offsetWidth-1+'px'; 这句话就是等于 oDiv.style.width=202-1=201px; 然后在赋值给width

当再次执行这句话的时候 div的宽度是 201px; 这样的话，每次都会增加1px，反而慢慢变大了。 这就是offset 的bug 。

怎么解决这个问题呢？

其实不用这个offsetWidth 就可以了 。 我们用 width ！！ 写个函数直接获取 css样式中width 即可

获取不在行间中的样式 ：

function getStyle(obj, name) {

                if (obj.currentStyle) {

                    return obj.currentStyle[name];

                } else {

                    return getComputedStyle(obj, null)[name];

                }

            }

那么我们在修改下原来的代码：

<script type="text/javascript">

            setInterval(function(){

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

                oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';

            },30);

            function getStyle(obj, name) {

                if (obj.currentStyle) {

                    return obj.currentStyle[name];

                } else {

                    return getComputedStyle(obj, null)[name];

                }

            }

        </script>

这样程序运行就不会有任何问题了。

Javascript 运动中Offset的bug——逐行分析代码，让你轻松了解运动的原理的更多相关文章

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

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

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

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

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

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

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

    等待已久的可变大,变宽 等一系列效果运动框架出炉了,现在还是个初级版本,能满足需求.我们看看是如何实现的. 我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如: oDiv.style.h ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. C++程序设计实践指导1.6分数运算改写要求实现

    改写要求:重载>>和<<实现分数类对象的直接输入输出,重载+完成多个分数对象加法 #include <cstdlib> #include <iostream& ...

  2. CDZSC_2015寒假新人（1）——基础 c

    Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the wareho ...

  3. 日志管理-NLog日志框架简写用法

    本文转载:http://www.blogjava.net/qiyadeng/archive/2013/02/27/395799.html 在.net中也有非常多的日志工具,今天介绍下NLog.NLog ...

  4. JAVA编程思想——类型信息(反射)

    一.反射与RTTI RTTI:这个类型必须在编译的时候已知或者存在,如果不知道对象的确切类型,RTTI可以告诉你. 反射(个人认为就是能够利用Class获取或者调用.class这个文件中的数据):当我 ...

  5. 获取所有树叶子节点 注册添加事件 if ($(node).tree('isLeaf', node.target)) 是否叶子节点

    //获取所有树叶子节点 注册添加事件 if ($(node).tree('isLeaf', node.target)) 是否叶子节点 $(function () { $('.easyui-tree') ...

  6. SQL Server 提高创建索引速度的 2 个方法

    方法 1. 使用tempdb来提速 create index index_name on table_name (column_list) with(sort_in_tempdb = on); 方法 ...

  7. 【stm32】实现STM32的串口数据发送和printf函数重定向

    在调试电机驱动程序的时候,是不能随便利用中断来进行一些寄存器或数据的查看的,不然你在运行的时候突然来一下,如果占空比大的话那可能直接就把MOS管给烧了,所以我们很多情况下只能使用USART(串口)来进 ...

  8. Oracle EBS-SQL (CST-4):检查组织间项目成本.sql

    select       i1.segment1                                                                           项 ...

  9. registered the JBDC driver [oracle.jdbc.OracleDriver] but failed to unregister it when the web application was stopped. (转)

    最近项目中遇见一问题,在开发环境没有问题的代码,到了生产环境就会报如下错误:   严重: A web application registered the JBDC driver [oracle.jd ...

  10. [Leetcode][Python]47: Permutations II

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 47: Permutations IIhttps://oj.leetcode. ...