多物体运动

<!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. 获取dataGridView双击时判断双击的是下面的行，还是列头

    private void dataGridView1_DoubleClick(object sender, EventArgs e) { Point hit = this.dataGridView1. ...

  2. Django的模板与母版

    Django的模板与母版 Python Django 模板 母版  Django模板系统 与Django模板有关的官方文档 语法相关 变量相关 {{ 变量名 }}  {{ name }},{{name ...

  3. Vivado 的IP：Global 和 Out-Of-Context选项问题

    在Vivado定制IP的时候,或者在IP Catalog中双击一个IP,不论该IP是我们自己添加到工程的自定义IP,还是Vivado自己带的IP,选择"Customize IP"后 ...

  4. Zookeeper---系统学习

    1.概述 1.1 Zookeeper解决了什么问题? 分布式环境中    协调和管理服务    是一个复杂的过程: Zookeeper通过  其简单的架构和API  解决了这个问题,Zookeeper ...

  5. C#常用的引用

    1.使用ConfigurationManager需要在.net引用中添加System.Configuration引用 2.使用HttpContext需要在.net引用中添加System.Web引用

  6. display:inline-block会出现的问题

    用一个父元素包裹三个子元素,将父元素的white-space设置为nowrap;这样子元素就会排在父元素中而不会换行了,通过这种方式,我们也就可以在移动端使用包裹元素的margin值实现类似的单页应用 ...

  7. Ubuntu下伪分布式模式Hadoop的安装及配置

    1.Hadoop运行模式Hadoop有三种运行模式,分别如下:单机(非分布式)模式伪分布式(用不同进程模仿分布式运行中的各类节点)模式完全分布式模式注:前两种可以在单机运行,最后一种用于真实的集群环境 ...

  8. MySQL查询近一个月的数据

    MySQL查询近一个月的数据 近一个月统计SQL select user_id, user_name, createtime from t_user where DATE_SUB(CURDATE(), ...

  9. EntityManager对象管理

    根据EntityManager对象的管理方式,可以有以下两种类型: — 容器托管的(container-managed)EntityManager对象 容器托管的EntityManager对象最简单, ...

  10. Java 字符串（String）格式转json格式

    json是前后端传输数据的一种文本格式,json其实就是字符串,因为前后端传输数据时,只能传输字符串,我们又想传一些对象或者列表信息,这都是很常见的应用场景. 所以,我们需要在java代码中,把jav ...