<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. jsoup获取图片示例

    import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.Inp ...

  2. [翻译svg教程]Path元素 svg中最神奇的元素！

    先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...

  3. javascript array sort()

    [5,10,1].sort(); 结果[1,10,5] 有点出人意料. array.sort( sortFunction )可选-指定如何比较元素顺序的函数名称 如果省略sortFunction参数, ...

  4. PAT Judge

    原题连接:https://pta.patest.cn/pta/test/16/exam/4/question/677 题目如下: The ranklist of PAT is generated fr ...

  5. Unity自动寻路Navmesh之入门

    实例 我们要实现一个功能:点击场景中的一个位置,角色可以自动寻路过去.角色会绕过各种复杂的障碍,找到一条理论上”最短路径“. 步骤 1.创建地形 2.添加角色 3.创建多个障碍物,尽量摆的复杂一点,来 ...

  6. Redis 排行榜 相同分数根据时间优先排行

      版权声明:本文为博主原创文章,未经博主允许不得转载. 1. 需求 Redis 提供了按分数进行排序的有序集合. 比如在游戏里面,比如战斗力排行,充值排行,用默认的Redis 实现就可以达到需求. ...

  7. 用c#创建支持多语言的WinForm应用程序

    实现多语言的方法可能有使用资源文件,或者配置xml两种方法吧.没时间研究过多,学习了一下使用资源文件的方法,成功了. 在.net2.0 中,m$ 为我们提供了一种简单方便的方法, 使用资源文件 1.新 ...

  8. VS2015安装&简单的C#单元测试

    <软件工程>开课已经三周了,三周的上课感觉就是老师教授的概念性东西少了不少,基本就是贯穿“做中学”的教学理念,三周的时间让我学到了挺多东西,很多东西都是课本没有的. 这周的任务就是安装VS ...

  9. Python黑帽编程2.8 套接字编程

    Python黑帽编程2.8 套接字编程 套接字编程在本系列教程中地位并不是很突出,但是我们观察网络应用,绝大多数都是基于Socket来做的,哪怕是绝大多数的木马程序也是如此.官方关于socket编程的 ...

  10. ASP.NET MVC 路由(三)

    ASP.NET MVC路由(三) 前言 通过前两篇的学习会对路由系统会有一个初步的了解,并且对路由系统中的Url规则有个简单的了解,在大家的脑海中也有个印象了,那么路由系统在ASP.NETMVC中所处 ...