多物体运动

<!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. PHP单表操作mysqli数据库类的封装

    class DB{ private $options=array( 'database_type' => 'mysql', 'database_name' => 'test', 'serv ...

  2. ionic基础知识

    ion-header-bar(头部 页眉) 在内容顶部添加一个固定header栏. 用法 <ion-header-bar align-title="left" class=& ...

  3. iptables开放所有端口

    iptables -P INPUT ACCEPT iptables -P OUTPUT ACCEPT

  4. Jmeter将JDBC Request查询结果作为下一个接口参数方法(转载)

    现在有一个需求,从数据库tieba_info表查出rank小于某个值的username和count(*),然后把所有查出来的username和count(*)作为参数值,用于下一个接口. tieba_ ...

  5. 三种实现日志过滤器的方式 (过滤器 (Filter)、拦截器(Interceptors)和切面(Aspect))

    1.建立RequestWrapper类 import com.g2.order.server.utils.HttpHelper; import java.io.BufferedReader; impo ...

  6. php查询某个字段指定值的所有条数

    一.查询某个字段指定值的所有条数 以name叫张三的人为例,查询表中叫张三的人的总数 $where['name']='张三'; $count=M('table')->where($where)- ...

  7. 2016424王启元 Exp3免杀原理与实现

    基础问题回答 1.杀软是如何检测出恶意代码的? (1)基于特征码的检测 特征码是能识别一个程序是一个病毒的一段不大于64字节的特征串.如果一个可执行文件包含这样的特征码则被杀毒软件检测为是恶意代码. ...

  8. 1.python学习计划

    1.python学习 第一次使用博客园作为学习记录日志,希望能在这里记录自己的学习点滴. 慢慢去挖掘它的强大功能吧

  9. android 仿网易新闻首页框架

       实现思路很简单左侧栏目是一个一个的 Fragment 的,点击时动态替换各个 Fragment 到当前 Activity 中. 关键代码: public void loadFragment(Ma ...

  10. Vi/Vim命令壁纸图

    下载地址 http://pan.baidu.com/s/1mtQdY