我们先来看看这个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. php Debugging with Xdebug and Sublime Text 3(转)

    Debugging – we all do it a lot. Writing code perfectly the first time around is hard and only a few ...

  2. LInux系统及其文件系统

    Linux系统:Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网络协 ...

  3. 【Android & iOS】应用升级实现

    在移动应用中,都会有的一个功能就是应用版本升级,怎么实现这个功能呢? 基本的思路就是:对比当前使用的应用版本和最新的版本号,如果版本号不一致,就可以提示用户升级啦. Android中,可以通过一下方式 ...

  4. 使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

  5. Gallery过时替代方案HorizontalScrollView

    布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:androi ...

  6. C# Winform程序本地化应用

    1. 创建一个WinForm应用程序 – “WindowsFormsLocalizationTest”. 2. 在主窗体属性栏里,把Localizable属性设置成”True”. 3. 添加两个But ...

  7. Android Studio导入GitHub

    方法一:引用开源项目的compile添加到gradle中http://www.zhihu.com/question/27027667 方法二:下载安装包引入:http://blog.csdn.net/ ...

  8. LINQ to Entities 不识别方法的解决方案

    //这样不行 var   BrushProducTimeout = aliexpressEntities.CP_BrushProduc.Where(p => p.isActive == true ...

  9. logcat错误日志

    http://www.crifan.com/android_log_to_file/ http://www.iteye.com/problems/85431 http://www.cnblogs.co ...

  10. Zigbee2007协议中文介绍

    Zigbee2007中文介绍ZigBee2007规范定义了ZigBee和ZigBee Pro两个特性集,全新的ZigBee 2007规范建立在ZigBee2006之上,不但提供了增强型的功能而且在某些 ...