<style type="text/css">

     div {

         width: 100px;

         height: 50px;

         background: red;

         margin: 10px;

     }

 </style>

 <body>

     <div></div>

     <div></div>

     <div></div>

 </body>

 <script type="text/javascript">

     window.onload = function () {

         var aDiv = document.getElementsByTagName('div');

         for (var i = ; i < aDiv.length; i++) {

             aDiv[i].timer=null;

             aDiv[i].onmouseover = function () {

                 startMove(this, );

             };

             aDiv[i].onmouseout = function () {

                 startMove(this, );

             };

         }

     }

     function startMove(obj, iTarget) {

         clearInterval(obj.timer);

         obj.timer = setInterval(function () {

             var speed = (iTarget - obj.offsetWidth) / ;

             speed = speed >  ? Math.ceil(speed) : Math.floor(speed);

             if (obj.offsetWidth == iTarget) {

                 clearInterval(obj.timer);

             } else {

                 obj.style.width = obj.offsetWidth + speed + 'px';

             }

         }, );

     }

 </script>

JavaScript Timer实现动画效果的更多相关文章

  1. javascript 通用loading动画效果

    由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法: 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); ...

  2. javascript 回到顶部 动画效果

    上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...

  3. 如何使用SVG生成超酷的页面预加载素描动画效果

    在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像 ...

  4. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  5. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  6. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  7. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  8. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  9. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

随机推荐

  1. ubuntu server 搭建自己的个人博客及其他网站

    一, 安装apache2服务器 sudo apt-get install apache2 二,安装mysql服务器 sudo apt-get install mysql-server 此时会提示输入M ...

  2. IIS ISAPI

    cscript.exe %SYSTEMDRIVE%\inetpub\adminscripts\adsutil.vbs SET W3SVC/AppPools/Enable32bitAppOnWin64 ...

  3. VB6与VB.NET对照表

    VB6与VB.NET对照表 VB6.0 VB.NET AddItem Object名.AddItem Object名.Items.Add ListBox1.Items.Add ComboBox1.It ...

  4. 【BZOJ】4002: [JLOI2015]有意义的字符串

    题意 求$\left \lfloor \left( \frac{b+\sqrt{d}}{2} \right)^n \right \rfloor \pmod {7528443412579576937} ...

  5. MySQL多表查询

    第一种: select a.a1,a.a2,a.a3,b.b2,c.c2,d.d2 from a,b,c,d where a.a1=b.b1 and b.b1=c.c1 and c.c1=d.d1 第 ...

  6. 匿名对象 构造方法 重载 构造代码块 this 关键字

    一.匿名对象 1.匿名对象 :没有名字对象 2.匿名对象的使用注意点: 1.我们一般不会用匿名对象给属性赋值,无法获取属性值. 2.匿名对象永远都不可能事一个对象. 3.匿名对象的好处 : 书写简单. ...

  7. Mysql 学习笔记

    创建表: create table testtable( id_ bigint not null AUTO_INCREMENT, name varchar(75) null, vmid varchar ...

  8. cxf3.1.4所需jar，大部分都可以从cxf3.1.4的lib包下找到

    asm-.jar commons-beanutils-.jar commons-collections-.jar commons-lang-2.6.jar cxf-core-.jar cxf-rt-b ...

  9. Xcode 改时间问题 lua代码没反应问题

    Xcode 改时间问题  rm -fr $_TARGET_BUILD_CONTENTS_PATH/$1/*

  10. 无参数实例化Configuration对象以及addResource无法加载core-site.xml中的内容

    core-site.xml中配置的fs.default.name是hdfs://localhost:9000.但是这里读取出来的是本地文件系统.原因暂不知?有谁知道?