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

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,"width",400);
}
ls[i].onmouseout=function(){
startMove(this,"height",400);
}
}
}
function startMove(object,attr,Target){
//alert(parseInt(getStyle(object,attr));
clearInterval(object.timer);
object.timer=setInterval(function(){
var speed=(Target-parseInt(getStyle(object,attr)))/10;
speed=speed>0? Math.ceil(speed):Math.floor(speed);
if(parseInt(getStyle(object,attr))==Target){
clearInterval(object.timer);
}else{
object.style[attr]=parseInt(getStyle(object,attr))+speed+"px";//这个地方,我们设置属性通过object.style[attr]来设置的。
}
},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的,这个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. IntelliJ IDEA编辑器的使用技巧

    目录 1. 使用技巧 1. 跳转小工具 2. 无处不在的跳转 3. 精准搜索 4. 列操作: 5. live template 6. postfix 7. ALT+ENTER智能提示,代码优化 8. ...

  2. Xilinx FGPA 上板调试 集成逻辑分析工具 Integrated Logic Analyzer(ILA) 简单配置 chipscope

    Xilinx Vivado 提供了上板后的FPGA逻辑分析,信号视图显示等功能. 需要注意,上板后查看信号需要重新综合,并且需要耗费一定的片上布局布线资源. 1. 添加debug信号 可以对模块端口或 ...

  3. PHP正则匹配网址

    /** * @param $url 网址 * @return bool */ public static function checkUrl($url){ $pattern="/^(http ...

  4. Qt SDK Issue cstdlib: fatal error: stdlib.h: No such file or directory

    *To reproduce the issue, I've tried the following solutions which did not help:* *1) Globally remove ...

  5. KB,MB,GB,TB,PB,EB,ZB,YB,BB

    1 Bit = Binary Digit 8 Bits = 1 Byte 1024 Bytes = 1 Kilobyte 1024 Kilobytes = 1 Megabyte 1024 Megaby ...

  6. 观察者(Observer)模式

    观察者模式又叫做发布-订阅模式(Publish.Subscribe)模式.模型-视图模式(Model/View)模式.源-监听器模式(Source/Listener)模式或从属者(Dependents ...

  7. 原始(Prototype)模式

    原型模式:用原型实例指定创建对象的种类,并且通过拷贝这些原型对象创建新的对象. 原型模式其实就是从一个对象创建另外一个可复制的对象,而且不需要知道任何创建的细节.(最常用的就是基于流的深复制) 原始模 ...

  8. servlet是一组规范--Servlet是JavaEE规范的一种

    Java Servlet API是Servlet容器和Servlet之间的接U,它定义了Servlet的各种方法, 还定义了Servlet容器传送给Servlet的对象类,其中最重要的是请求对象Ser ...

  9. .NET Core中如何对Url进行编码和解码

    我们在.NET Core项目中,可以用WebUtility类对Url进行编码和解码,首先我们要确保项目中引入了nuget包:System.Runtime.Extensions 当然这个nuget包默认 ...

  10. CLR学习之初识CLR

    一.什么是CLR? CLR即公共语言运行时(Common Language Runtime,简称CRL),就是微软为.net产品构建的运行环境,与java的JVM类似,通俗的讲就是.net虚拟机.CL ...