<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. xcode 一般插件

    插件编写 xcode的插件不算多,找遍了网络也就大猫小猫而三只.不过虽然不多,但是大部分的插件都非常有用.以下5歀插件是我几台机器上都安装了并且经常使用的. 1. MiniXcode MiniXcod ...

  2. sql server 代理服务

    sql server 创建维护计划失败.错误代码:c001f011. 从 IClassFactory 为 CLSID 为 {17BCA6E8-A95D-497E-B2F9-AF6AA475916F} ...

  3. css解决display:inline-block;产生的缝隙（间隙）

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是 ...

  4. [WPF] 我的WPF自学日记2，自定义入口

    在winform中入口文件就是Program.cs,而在WPF中看不到,因为它是自动生成的,可以说隐藏了,我们可以自定义一个入口文件,然后修改项目属性中的启动对象为我们自定义的入口文件. 首先新建入口 ...

  5. 理解AUC

    本文主要讨论了auc的实际意义,并给出了auc的常规计算方法及其证明 转载请注明出处:http://www.cnblogs.com/van19/p/5494908.html 1 ROC曲线和auc 从 ...

  6. Hello Bugs

    2014-01-09 [Maven]Not Authorized ReasonPhame: Failed to decrypt password... 描述:eclipse中使用maven进行mvn ...

  7. backbone入门示例

    最近因为有个项目需要用backbone+mui  所以最近入坑backbone. Backbonejs有几个重要的概念,先介绍一下:Model,Collection,View,Router.其中Mod ...

  8. Centos 编写 service 启动

    Centos 系统服务脚本目录: [html] view plaincopyprint?   /usr/lib/systemd/ 有系统(system)和用户(user)之分, 如需要开机没有登陆情况 ...

  9. 浅谈PHP7新特性

    1. 运算符(NULL 合并运算符) 把这个放在第一个说是因为我觉得它很有用.用法: $a = $_GET['a'] ?? 1; 它相当于: $a = isset($_GET['a']) ? $_GE ...

  10. 纯jQuery-添加/修改/删除 标签，属性

    <h1>通过学习<精彩绝伦的jQuery>与W3C,大致了解JQuery的一些方法.</h1> PS:需要有一些前置条件,比如JQuery源代码,比如html就要有 ...