多物体运动

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   div{
    width: 50px;
    height: 30px;
    background: #444444;
    margin-top: 5px;
    
   }
  </style>
  <script>
   window.onload = function(){
    var obj = document.getElementsByTagName('div');
    
    for(var i=0;i<obj.length;i++){
     obj[i].onmouseover = function{
      startmove(this,500);
     };
     obj[i].onmouseout = function(){ 
      startmove(this,50);
     };
    }
   };
   
   var timer = null;
   function startmove(obj,target){
    var speed = (target-obj.offsetWidth)/6;     
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    
    clearInterval(timer);
    timer = setInterval(function(){
     if(obj.offsetWidth == target){
      clearInterval(timer);
     }else{
      obj.style.width = obj.offsetWidth + speed +'px';
     }
    },30);   
   }   
  </script>
 </head>
 <body>
  <div></div>
  <div></div>
  <div></div>
 </body>
</html>

Javascript 多物体运动1的更多相关文章

  1. javascript多物体运动案例：多物体淡入淡出

    javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...

  2. Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...

  3. day40—JavaScript多物体运动框架

    转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...

  4. javascript每日一练（十一）——多物体运动

    一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...

  5. JavaScript 运动（缓冲运动，多物体运动 ,多物体多值运动+回调机制）

    匀速运动   (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...

  6. js动画之多物体运动

    多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  8. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  9. javascript链式运动框架案例

    javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...

随机推荐

  1. NSInvocation 调用block clang代码转换c++

    NSInvocation 调用block cpp 转换 fatal error: 'UIKit/UIKit.h' file not found https://blog.csdn.net/yst199 ...

  2. 二分--POJ-3258

    POJ-3258,二分 题目 Description Every year the cows hold an event featuring a peculiar version of hopscot ...

  3. Apache 配置代理服务

    1.根据项目需要,Apache服务下面有2个tomcat 分别指向不同的域名 2.修改 Apache-conf-httpd.conf LoadModule proxy_module modules/m ...

  4. MVC返回数据流，ajax接受并保存文件

    js代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  5. $bzoj1019-SHOI2008$ 汉诺塔 $dp$

    题面描述 汉诺塔由三根柱子(分别用\(A\ B\ C\)表示)和\(n\)个大小互不相同的空心盘子组成.一开始\(n\)个盘子都摞在柱子\(A\)上,大的在下面,小的在上面,形成了一个塔状的锥形体. ...

  6. CentOS6.5安装testlink1.9.14

    前提条件:准备一台CentOS6.5虚拟机,配置好IP,关闭iptables和selinux. 这里提供上我的云盘软件,可以去这里下载:http://pan.baidu.com/s/1qXymele ...

  7. (转)Linux strace命令

    原文:https://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316692.html https://linux.cn/article-6444-1 ...

  8. selenium+python(数据驱动测试)

    自动化领域的两种驱动,对象驱动与数据驱动 数据驱动:测试数据的改变引起执行结果的改变 叫 数据驱动 关键字驱动:测试对象名字的改变起引起测试结果的改变 叫 关键字驱动 1 .读取文件参数化   以百度 ...

  9. 【随笔】 Win7下安装Git

    Git GGit是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.[2] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源 ...

  10. java设计模式之桥梁模式(Bridge)

    1.桥梁模式 与 策略模式 非常相似 (其实很多设计模式都相似,因为所有的模式都是按照设计原则 而设计出来的,设计原则就相当于武功的心法,设计模式就是招式,只要心法过硬,就可以无招胜有招了.) 这里也 ...