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

js文件

  1. window.onload=function(){
  2. var ls=document.getElementsByTagName("li");
  3. for(var i=0,l=ls.length;i<l;i++){
  4. ls[i].timer=null;
  5. ls[i].onmouseover=function(){
  6. startMove(this,"width",400);
  7. }
  8. ls[i].onmouseout=function(){
  9. startMove(this,"height",400);
  10. }
  11. }
  12. }
  13. function startMove(object,attr,Target){
  14. //alert(parseInt(getStyle(object,attr));
  15. clearInterval(object.timer);
  16. object.timer=setInterval(function(){
  17. var speed=(Target-parseInt(getStyle(object,attr)))/10;
  18. speed=speed>0? Math.ceil(speed):Math.floor(speed);
  19. if(parseInt(getStyle(object,attr))==Target){
  20. clearInterval(object.timer);
  21. }else{
  22. object.style[attr]=parseInt(getStyle(object,attr))+speed+"px";//这个地方,我们设置属性通过object.style[attr]来设置的。
  23. }
  24. },50)
  25. }
  26. function getStyle(object,attr){
  27. if(object.currentStyle){
  28. return object.currentStyle[attr];//IE浏览器
  29. }else if(getComputedStyle){
  30. return getComputedStyle(object,false)[attr];//火狐浏览器
  31. }
  32. }

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

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

    对于前面的课程,大家似乎看不出来存在什么问题,一切都很顺利,但是其实是存在一个很大的bug的,这个bug是什么呢?? 我们来看看下面这个程序就知道了 <!DOCTYPE html> < ...

  2. 从一个小Bug,到Azure DevOps

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

  3. 关于一个小bug的修正

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

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

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

  5. js实现一个小游戏(飞翔的jj)

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

  6. Python2 下 Unicode 的一个小bug

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

  7. 从CR线下活动学到的:如何组织一个小的线下活动

    作者:朱克锋 邮箱:zhukefeng@iboxpay.com 转载请注明出处:http://blog.csdn.net/linux_zkf 周末在腾讯组织了GR,活动达到了预期的收获,从这次活动我主 ...

  8. VS2010环境下.NET4.0中Tuple<T>的一个小BUG问题

    启动一个桌面程序后,发现一个窗体cfdata=null, 执行时发生错误, 但是在初始化的时候,我明明是cfdata=new Cfdata();为什么会出现这个错误呢. 我开始跟踪,发现当执行cfda ...

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

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

随机推荐

  1. Scala 在挖财的应用实践

    编者按:本文是根据ArchSummit 大会上挖财资深架构师王宏江的演讲<Scala 在挖财的应用实践>整理而成. 这次分享有三个方面,一是介绍一下挖财当前的开发情况和后端的架构, 二是挖 ...

  2. 一个sh脚本 同时运行 多个sh脚本

    问题: 原来的启动方式 cd /opt/OpenIMSCore ./pcscf.sh ./icscf.sh ./scscf.sh cd /opt/OpenIMSCore/FHoSS/deploy ./ ...

  3. JavaScript 一些实用技巧

    快速创建从0到n的数字 let arr1 = [...(new Array(n)).keys()]; let arr2 = Array.from({length:n},(v, k) => k); ...

  4. maven 打包添加依赖

    1.将依赖与自己的代码打入同一个jar包 只需在pom中添加如下plugin 在include 中添加需要的依赖,在exclude 中添加不需要的依赖 <groupId>org.apach ...

  5. 一场Math.Round函数的误解

    有不少人误将Math.Round函数当作四舍五入函数在处理, 结果往往不正确, 实际上Math.Round采用的是国际通行的是 Banker 舍入法. Banker's rounding(银行家舍入) ...

  6. 小白的C++之路——求质数

    初学C++,打算用博客记录学习的足迹.写了两个求质数的程序,修修改改. #include <iostream> #include <math.h> using namespac ...

  7. python 笔记——生成器和迭代器

    #-*- coding:utf-8 -*- a=[1,2,3,4] for i,j in enumerate(a): print i,j '''只有ij时,''' a=[1,2,3,4] for i ...

  8. Wamp Https 的 SSL认证 配置说明

    Wamp Https 的 SSL认证 配置说明版本 Apache2.2.11注:右下角图标的 重启 不能有效加载 配置文件 应退出后重新运行注:C:\wamp\bin\apache\Apache2.2 ...

  9. C#简单构架之EF进行读写分离+多数据库Mysql/SqlServer

    http://www.php361.com/index.php?c=index&a=view&id=3857 不建议用,太重的框架EF,仅仅参考一下别人的思路就好. [导读]最近因为项 ...

  10. 用C#搭建WebSocket

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 W ...