avascript 运动中Offset的bug解决方案

这篇文章主要介绍了Javascript 运动中Offset的bug解决方案,需要的朋友可以参考下

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

代码如下:

1 <style type="text/css">
2             #div1 {
3                 width: 200px;
4                 height: 200px;
5                 background: red;
6
7             }
8 </style>

代码如下:

1 <body>
2         <div id="div1">
3
4         </div>
5     </body>

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

代码如下:

1 <script type="text/javascript">
2             setInterval(function(){
3                 var oDiv=document.getElementById("div1");
4
5                 oDiv.style.width=oDiv.offsetWidth-1+‘px‘;
6
7             },30);
8  </script>

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

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

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

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

代码如下:

1 <style type="text/css">
2             #div1 {
3                 width: 200px;
4                 height: 200px;
5                 background: red;
6                 border: 1px solid #CCCCFF;
7             }
8 </style>

此时在运行代码 ,发现div 居然往右边慢慢增大。。。image 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 即可

获取不在行间中的样式 :

代码如下:

1 function getStyle(obj, name) {
2                 if (obj.currentStyle) {
3                     return obj.currentStyle[name];
4                 } else {
5                     return getComputedStyle(obj, null)[name];
6                 }
7  }
8  

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

代码如下:

 1 <script type="text/javascript">
 2             setInterval(function(){
 3                 var oDiv=document.getElementById("div1");
 4                 oDiv.style.width=parseInt(getStyle(oDiv,‘width‘))-1+‘px‘;
 5             },30);
 6             function getStyle(obj, name) {
 7                 if (obj.currentStyle) {
 8                     return obj.currentStyle[name];
 9                 } else {
10                     return getComputedStyle(obj, null)[name];
11                 }
12             }
13 </script>

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

时间: 2024-11-08 07:59:46

avascript 运动中Offset的bug解决方案的相关文章

“System.NullReferenceException”类型的异常在 App_Web_j2s3gau3.dll 中发生,但未在用户代码中进行处理的Bug解决方案

这个异常报错的原因也许在不同的项目中,也有很多种原因导致出错.在这里我针对我的项目,看了报错的提示,找了大半天.终于找到了..唉..虽然简单,但还是写写. 我的项目里实现了URL的重写,URL重写类里面做了一个“网站访问日志”的功能,该功能只不过是记录来网站的URL,并保存数据库中.在这里我用到了,缓存(HttpRuntime.Cache),在整个应用程序中都可以访问该值.之前的是 Microsoft .NET Framework 3.5,现在我 升到Microsoft .NET Framewo

Ubuntu 14.04 亮度BUG解决方案

不少Ubuntu 13.10用户遇到了屏幕亮度设置异常问题,无法调节亮度级别,尤其使用英特尔的平台.同样该系统BUG在最新开发的Ubuntu 14.04 (Trusty Tahr)中也继续存在,官方也没有及时修复该问题. 如果你现有的平台基于英特尔,使用了英特尔芯片组,在Ubuntu 13.10/Ubuntu 14.04系统下,无法更改屏幕亮度级别. 具体问题如下,打开系统设置,进入“亮度&锁屏”选项,调节亮度级别都无法正常生效. 除了影响英特尔平台外,不少使用英伟达显卡设备的用户也会遇到该系统

AndroidPn服务端部分bug解决方案

目前推送的情况已经大致可以了,可以正常推送.但是要在实际生产中使用,要改进很多地方. 原本的版本,是不会对消息重新发送的.消息如果丢失,或者用户没有在线,消息也不会重新的发送.所以,这些问题都是要解决的. 网上也有很多的讨论,是关于这几种情况的.CSDN有个名为“大饼馒头蘸大米”的程序员,对这些问题的思路也不错,是采取的对未发送信息进行存库,并且用state来标记信息是否发送,来进行处理的. 本人是采取的另外一种方式,这种方式,是某位网友最早提出来的.对离线消息,就是发送后存库,同时要记录用户的

为什么我没有拔出钥匙 ——开锁引发的程序bug解决方案的思考

http://blog.csdn.net/wojiushiwo987/article/details/8851204为什么我没有拔出钥匙 ——开锁引发的程序bug解决方案的思考 今天中午回宿舍的时候,舍友S开完锁以后,钥匙在锁槽里拔不出来了.以前只是锁不怎么好用,左旋右旋活几下1分钟之内就能打开了.这次,的确可能卡的比较紧吧,室友S旋转了好久没有打开.然后,我接过来弄了好久(几乎同样的方法)也没有打开.此时室友S告诉我,他上午给老师屋开门,没有打开,钥匙断在里面了,刚报修了.此时,我的第一反应就

大龙的胡思乱想之“filestream中offset参数”

改偏移量之前 using (FileStream fs = new FileStream(txtFilePathRead.Text, FileMode.Open)) { //创建一个容量4M的数组 byte[] byteData = new byte[1024 * 1024 * 4]; //从文件中读取数据写入到数组中(数组对象,从第几个开始读,读多少个) //返回读取的文件内容真实字节数 int length = fs.Read(byteData, 0, byteData.Length );

NeuraSuite.v2005.11 1CD(石油和天然气行业中实用且直观解决方案的软件)

NeuraSuite.v2005.11 1CD(石油和天然气行业中实用且直观解决方案的软件) NIST-Refprop v7.0 1CD Petroleum Toolboxes 2008 v10.0 1CD Pipeline Studio 3.2.06-ISO 1CD(稳定版,化工管道仿真技术) Pipeline Toolbox 2008 Enterprise Edition 1CD Portable Arguslab v4.0.1 1CD Portable ChemSketch v11.2 1

使用sqoop1.4.4从oracle导入数据到hive中错误记录及解决方案

在使用命令导数据过程中,出现如下错误 sqoop import --hive-import --connect jdbc:oracle:thin:@192.168.29.16:1521/testdb --username NAME --passord PASS --verbose -m 1 --table T_USERINFO 错误1:File does not exist: hdfs://opt/sqoop-1.4.4/lib/commons-io-1.4.jar FileNotFoundEx

Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案

Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案,ext 的CheckboxSelectionModel在后台默认选中之后,前台就不允许编辑的bug是存在的,因为CheckboxSelectionModel没有Disabled="true"的设置,只能想办法弥补,毕竟不能直接给GridPanel设置Disabled="true"这样的话,整个GridPanel都成灰色的了,现在不能满足用户的需求,不科学的界面如图: 那

Sass for循环中编译%时报错解决方案

sass功能强大,特别是支持for循环,节省大量开发时间,但是在开发时遇到一个问题,直接使用%时没有问题,当有变量时再加% 单位在编译时报错: 这样没有问题: @for $width from 0 to 10{ .wp#{$width}{ width:$width px; } } 但是这样就有问题了: @for $width from 0 to 10{ .wp#{$width}{ width:$width%; } } 或者这样: @for $width from 0 to 10{ .wp#{$w