Javascript 运动中Offset的bug——逐行分析代码，让你轻松了解运动的原理
我们先来看看这个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——逐行分析代码，让你轻松了解运动的原理的更多相关文章
- Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理
今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...
- Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理
看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...
- Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
- Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码，让你轻松了解运动的原理
等待已久的可变大,变宽 等一系列效果运动框架出炉了,现在还是个初级版本,能满足需求.我们看看是如何实现的. 我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如: oDiv.style.h ...
- Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理
大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...
- Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理
我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...
- Javascript 匀速运动停止条件——逐行分析代码，让你轻松了解运动的原理
我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug.这里加了两个标杆用于测试 <style type="text/css"> #div1 ...
- Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理
今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...
- Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
随机推荐
- UILabel + 导入字体
UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(10, 100, 300, 100)]; 1.设置文字颜色 label.textC ...
- Django学习(四) Django提供的后台管理系统以及如何定义URL路由
一旦你建立了模型Models,那么Django就可以为你创建一个专业的,可以提供给生成用的后台管理站点.这个站点可以提供给有权限的人进行已有模型Models数据的增删改查. 将新建的模型Models是 ...
- 图片异步加载 ,KVO
图片异步下载类目: .h #import <UIKit/UIKit.h> typedef void (^ImageBlock)(UIImage *img); @interface UIIm ...
- python连接redis文档001
Installation redis-py requires a running Redis server. See Redis’s quickstart for installation instr ...
- Oracle EBS-SQL (OM-5):检查订单事务处理类型.sql
SELECT HO.NAME OU ...
- Unix/Linux环境C编程入门教程(25) C/C++字符测试那些事儿
isalnum isalpha isascii iscntrl isdigit isgraph isislower isprint isspace ispunct isupper isxdigit介绍 ...
- AIX安装SSH
AIX 7.1 进入 https://www14.software.ibm.com/webapp/iwm/web/preLogin.do?source=aixbp 先下载需要的openssl,op ...
- 【具体数学--读书笔记】1.1 The Power of Hanoi
这一节借助汉诺塔问题引入了"Reccurent Problems". (Reccurence, 在这里解释为“the solution to each problem depend ...
- Single NumberII
**一定要注意 == 运算符的优先级高于& 因此在条件判断的时候 必须加括号 class Solution { public: int IsBit1(int num, int place) { ...
- Caused by: java.lang.ClassNotFoundException: com.mchange.v2.c3p0.ComboPooledDataSource
1.错误描写叙述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -he ...