对于前面的课程,大家似乎看不出来存在什么问题,一切都很顺利,但是其实是存在一个很大的bug的,这个bug是什么呢??

我们来看看下面这个程序就知道了

<!DOCTYPE html>
<html>
<head>
<title>js动画事件</title>
<link href="move.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="move.js"></script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

css文件(这里面为元素添加了border边框值)

*{
margin:0px;
padding:0px;
}
li{
width:200px;
height:100px;
background-color:red;
margin-bottom:30px;
border:1px solid #eeddcc;//我们多添加了这一行,看看会出现什么问题。
}

js文件

window.onload=function(){
var ls=document.getElementsByTagName("li");
for(var i=0,l=ls.length;i<l;i++){
ls[i].timer=null;
ls[i].onmouseover=function(){
startMove(this,400);
}
ls[i].onmouseout=function(){
startMove(this,200);
}
}
}
function startMove(object,Target){
clearInterval(object.timer);
object.timer=setInterval(function(){
var speed;
if(Target==400){
speed=1;
}else{
speed=-1;
}
if(object.offsetWidth==Target){
clearInterval(object.timer);
}else{
object.style.width=object.offsetWidth+speed+"px";
}
},50)
}

大家觉得似乎没有什么问题啊?其实运行一下就会发现,宽度到达398px就停止了,然后我们离开时又会增加?

我们仔细分析一下,因为offsetWidth获得的值会包括边框,那么边框2厘米,所以width就398厘米,但是离开时又会增加是为什么呢?

当我们离开时speed就变成可-1,那么此时的object.style.width=object.offsetWidth(400)+speed(-1)=399px;

然后到下一次判断语句object.offsetWidth=object.style.width(上一次等于399px)+border(2px)=401px;所以继续执行,然后一直执行下去。

我们在来看一个例子

js2

window.onload=function(){
var ls=document.getElementsByTagName("li");
for(var i=0,l=ls.length;i<l;i++){
ls[i].timer=null;
ls[i].onmouseover=function(){
startMove(this);
} } }
var timer;
function startMove(object){
var speed=-1;
clearInterval(timer);
timer=setInterval(function(){
object.style.width=object.offsetWidth+speed+"px";
},50)
}

这里我们明明设置的speed=-1,照说应该会慢慢变短的,但是发现运行结果是慢慢变长,这是为什么呢??

这还是因为border的问题。为什么呢?

比如此时的object.style.width=object.offsetWidth(200)-1=199PX

然后下一刻object.offsetWidth=199+border(2px)=201;如此反复所以是一直在增加。

所以发现通过object.offsetWidth这个存在一个bug。那我们如何来修改呢

方法一,将width,height参数写到元素里面去

<li style="width:200px; height:100px"></li>

然后这样获取object.style.width=parseInt(object.style.width)+speed+"px";

方法二

运用getStyle函数来获取属性

在js中定义一个getStyle函数;

js文件

window.onload=function(){
var ls=document.getElementsByTagName("li");
for(var i=0,l=ls.length;i<l;i++){
ls[i].timer=null;
ls[i].onmouseover=function(){
startMove(this);
} } }
var timer;
function startMove(object){
var speed=-1;
clearInterval(timer);
timer=setInterval(function(){
object.style.width=parseInt(getStyle(object,"width"))+speed+"px";//parseInt不能丢。
},50)
}
function getStyle(object,attr){//自定义一个函数用来获取属性值
if(object.currentStyle){
return object.currentStyle[attr];//IE浏览器
}else if(getComputedStyle){
return getComputedStyle(object,false)[attr];//火狐浏览器
}
}

js动画---一个小bug的处理的更多相关文章

  1. js动画--一个小bug处理下

    对于上面的课程我们很好的处理了一个小bug,那么我们现在讲程序进行优化一下,前一节的程序中,我们处理处理的属性都是写死了的.为了我们能够很好的对某个属性进行操作的话.我们这样来设置. js文件 win ...

  2. 关于一个小bug的修正

    python初学者,非常喜欢虫师的文章. 练习时发现一个小bug,http://www.cnblogs.com/fnng/p/3782515.html 验证邮箱格式一题中,第三个x不允许有数字,但是测 ...

  3. iOS开发之使用UICollectionView实现美团App的分类功能【偶现大众点评App的一个小bug】

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  4. Python2 下 Unicode 的一个小bug

    关于Python的编码问题已经是老生常谈了,此处主要是介绍一个罕见的问题,也算是Python2的一个bug了(Python3不会有此问题). 在有时候我们去爬取网页或者调用一些第三方库获取文本的时候, ...

  5. 第三方开源动画库EasyAnimation中一个小bug的修复

    看过iOS动画之旅的都知道,其中在最后提到一个作者写的开源动画库EasyAnimation(以下简称EA). EA对CoreAnimation中的view和layer动画做了更高层次的包装和抽象,使得 ...

  6. 《Node入门》读书笔记——用Node.js开发一个小应用

    Android APP的开发告一段落,一个稳定的.实现了基本功能的APP已经交付用户使用了!我和老板交流了下,接下来准备转战Node.js了,而且一部分前端的功能也要做进去!哈哈哈~~~接下来要朝一个 ...

  7. Cocos2d-JS V3.10 一个小bug提示

    感谢读者古事东流反馈,新版V3.10的音乐播放接口存在一个bug. 重复播放一个音乐,会出现音乐停止的状况. debug了一下,发现src的对比有点问题.传入的url是相对路径,但背景bgMusic. ...

  8. 一个短路求值引起的一个小bug

    今天在写一个判断字符串是否回文时因为短路求值问题导致了一个bug,记录如下: 代码如下 bool isPal(char str[],int len) { int begin=0; int end=le ...

  9. 关于c语言的一个小bug(c专家编程)

    不多说,说了都是累赘!直接看代码吧! #include <stdio.h> int array[] = {23, 34, 12, 17, 204, 99, 16}; #define TOT ...

随机推荐

  1. Java日志规范

    前言 一个在生产环境里运行的程序如果没有日志是很让维护者提心吊胆的,有太多杂乱又无意义的日志也是令人伤神.程序出现问题时候,从日志里如果发现不了问题可能的原因是很令人受挫的.本文想讨论的是如何在Jav ...

  2. Excel表格常用的函数,留着备用

    1. vlookup(lookup_value, table_array, col_index_num, boolean) -- 查找匹配函数 lookup_value: 你要去匹配的值 table_ ...

  3. Android sdk 镜像服务器资源

    大连东软信息学院镜像服务器地址:- http://mirrors.neusoft.edu.cn 端口:80北京化工大学镜像服务器地址:- IPv4: http://ubuntu.buct.edu.cn ...

  4. 经历:easyui的layout自适应高度布局

    在使用easyui的layout布局的时候,在某种情况下,我们会在后续的逻辑中修改一下layout的某个region的高度,那么该怎么做呢?  我就遇到了这样的情况,今天需求经理提出了一个需求:认证用 ...

  5. 模块化编程AMD&amp;CommonJS

    为什么要模块化编程 如果JS也可以像类似python,Java使用import,引入我们想要的模块,想要什么模块,就加载什么模块,可以给前端编程带来更多的便捷,结构更加清晰明了.但是,这样做有一个前提 ...

  6. mysql数据库sql常用命令

    1.查看索引:mysql> show index from tblname; 2.利用索引查询:SELECT * FROM product WHERE ID > =(select id f ...

  7. JavaScript之firstChild属性、lastChild属性、nodeValue属性学习

    1.数组元素childNodes[0]有更直观易读的优点,这边在介绍一个有同样功能的属性,且更加语义化-------->firstChild属性 假设我们需要目标元素节点下的所有子元素中的第一个 ...

  8. rowid去重(删除表的重复记录)

    -- 构造测试环境SQL> create table andy(id int,name varchar2(10));Table created.SQL>insert into andy v ...

  9. Index Scans 索引扫描

    官方文档链接地址 http://docs.oracle.com/cd/E11882_01/server.112/e40540/indexiot.htm#CNCPT1170 Index Scans 在索 ...

  10. web前段学习2016.6.6

    目前上网的方式:手机平板电脑移动端:智能手机.平板PC:电脑.笔记本运行在移动端的东西:APPios:object-candroid:javapc端的东西:桌面应用程序 c++ 我们上网的方式都是通过 ...