对于前面的课程，大家似乎看不出来存在什么问题，一切都很顺利，但是其实是存在一个很大的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. js实现一个小游戏（飞翔的jj）

    js实现一个小游戏(飞翔的jj) 源代码+素材图片在我的仓库 <!DOCTYPE html> <html lang="en"> <head> & ...

  5. 从一个小Bug，到Azure DevOps

    1. 一个小Bug 最近和同事提起一个几年前的 Bug,那是一个很小很小的 Bug,没什么技术含量.那时候我刚入职,正好公司卖了一款仪器到某个国家,但是那边说配套的软件运行不起来,一打开就报错.经过排 ...

  6. Python2 下 Unicode 的一个小bug

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

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

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

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

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

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

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

随机推荐

  1. Python【每日一问】25

    问: [基础题]:利用条件运算符的嵌套来完成此题:学习成绩 >=90 分的同学用 A 表示,60-89 分之间的用 B 表示,60 分以下的用 C 表示. [提高题]:求 s=a + aa + ...

  2. 连上Microbit板

    我们是在自己电脑上,用Mu编程,最终程序要烧录到Microbi板子的控制芯片中去,还记得这款芯片是哪家公司生产的?是多少位的?呵呵. 因此,我们要把板子和电脑连起来,用常见的一大一小的USB线就可以了 ...

  3. 最近C#项目中不小心踩的低级坑

    都是很基础的错误问题,大部分都是因为不查一下资料就直接根据其它类似语言的经验写代码导致的 1. 一个企业微信上的正常的界面突然不能滚动了 本以为是浏览器代码计算问题,结果发现是JS出错导致. 2. R ...

  4. C语言之四则运算表达式求值(链栈)—支持浮点型数据，负数， 整型数据运算

     运算符间的优先级关系: 链栈结构体定义: 数据域使用字符串长度为20的字符数组(故需要注意判断读取的字符串是运算符还是数值) 可支持浮点型数据,负数, 整型数据的运算 float EvaluateE ...

  5. Delphi支付宝支付【支持SHA1WithRSA(RSA)和SHA256WithRSA(RSA2)签名与验签】

    作者QQ:(648437169) 点击下载➨Delphi支付宝支付             支付宝支付api文档 [Delphi支付宝支付]支持条码支付.扫码支付.交易查询.交易退款.退款查询.交易撤 ...

  6. 解决新版本R3.6.0不能加载devtools包问题

    首先是看到下面这个文章想试着练习一下,结果第一步就卡住了,无法加载devtools包,繁体字都冒出来了......汗!(没有截图,但过程痛苦不堪~) https://www.sohu.com/a/12 ...

  7. 一、docker 入坑(win10和Ubuntu 安装)

    前言 终究还是绕不过去了,要学的知识真的是太多了,好在我们还有时间,docker 之前只闻其声,不曾真正的接触过,现在docker 越来越火,很多公司也都开始使用了.所以对于我们程序员而言,又得修炼一 ...

  8. Ubuntu 18 Kubernetes集群的安装和部署 以及Helm的安装

    首先说一下我的环境, 我是在windows 10 上面建了一个ubuntu18的虚拟机,同时由于某些原因 不受网络限制, 所以安装比较顺利. Install 1.安装并启用 Docker  sudo ...

  9. Java 8——Lambda表达式

    本篇文章不介绍Lambda的前世今生,这里只对Lambda表达的应用做详细了解.以及与内部类的差异点. Lambda表达式 Lambda表达式是Java SE 8版本中引入的新的语法糖.将功能看做方法 ...

  10. Vue搭建脚手架2

    Vue2.0搭建Vue脚手架(vue-cli) 在网上找了很多的搭建脚手架教程,但都不求甚解.终于找到2个比较好的教程,读者可对比阅读1和2,在这里分享给大家,希望对初学者有所帮助.ps:高手请绕道. ...