我们先来看看这个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. Swift语法基础入门三(函数, 闭包)

    Swift语法基础入门三(函数, 闭包) 函数: 函数是用来完成特定任务的独立的代码块.你给一个函数起一个合适的名字,用来标识函数做什么,并且当函数需要执行的时候,这个名字会被用于“调用”函数 格式: ...

  2. NSString 字符串操作

    //一.NSString /*----------------创建字符串的方法----------------*/ //1.创建常量字符串. NSString *astring = @"Th ...

  3. 000-C#基础

    C#中数据类型的继承关系如下 System.Object |-------------System.ValueType | |-------System.Boolean | |-------Syste ...

  4. [Effective Modern C++] Item 3. Understand decltype - 了解decltype

    条款三 了解decltype 基础知识 提供一个变量或者表达式,decltype会返回其类型,但是返回的内容会使人感到奇怪. 以下是一些简单的推断类型: ; // decltype(i) -> ...

  5. php 汉字排序

    <?phpheader("content-type:text/html;charset=utf-8");$array=array('重庆市','上海市','安徽省','吉林省 ...

  6. Android 桌面生成快捷方式

    Android生成桌面快捷方式的几种方法: //------------以下为动态替换桌面应用Icon的一种解决方案------------------- // 1.获取本地目录图片的Bitmap ; ...

  7. VS2010中手动重命名项目

    在visual studio 中重命名项目名称的方法: 1. 重命名项目名称 2. 修改Assembly name 3. 修改Default namespace 4. 在Assembly Inform ...

  8. Interaction with the camera or the photo library

    As we said before, we need a delegate to deal with the user interaction with the camera or the photo ...

  9. mobile web曾经的踩过坑

    兼容性一直是前端工程师心中永远的痛.手机浏览器,因为基本是webkit(blink)内核当道,很多公司,不用考虑IE系的浏览器,所以感觉兼容性上的问题可能会少一些. 但是手机端,虽然出了很多工具,但是 ...

  10. SSD和HDD的区别

    SSD与HDD最大的不同是:它没有马达.盘片.磁头摇臂这些HDD必需的机械部件,这是由两种硬盘不同的工作原理所决定的.SSD相比HDD来说节省了机械部件运动的时间,并且SSD所使用的主要存储元件NAN ...