一、多物体运动

　　需要注意：每个运动物体的定时器作为物体的属性独立出来互不影响，属性与运动对象绑定，不能公用；

例子1：

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>多物体运动</title>
 <style>
 div{ width:100px; height:100px; background:red; float:left; margin:10px; border:1px solid black; opacity:0.3; filter:alpha(opacity=30);}
 </style>
 <script>
 window.onload = function()
 {
     var aDiv = document.getElementsByTagName('div');

     aDiv[0].onmouseover = function()
     {
         startMove(this, 'width', 300);
     };
     aDiv[0].onmouseout = function()
     {
         startMove(this, 'width', 100);
     };

     aDiv[1].onmouseover = function()
     {
         startMove(this, 'height', 300);
     };
     aDiv[1].onmouseout = function()
     {
         startMove(this, 'height', 100);
     };

     aDiv[2].onmouseover = function()
     {
         startMove(this, 'opacity', 100);
     };
     aDiv[2].onmouseout = function()
     {
         startMove(this, 'opacity', 30);
     };

     aDiv[3].onmouseover = function()
     {
         startMove(this, 'borderWidth', 20);
     };
     aDiv[3].onmouseout = function()
     {
         startMove(this, 'borderWidth', 1);
     };
 };

 function getStyle(obj, attr)
 {
     if(obj.currentStyle){
         return obj.currentStyle[attr];
     }else{
         return getComputedStyle(obj, false)[attr];
     }
 }

 function startMove(obj, attr, iTarget)
 {
     clearInterval(obj.timer);

     obj.timer = setInterval(function(){
         var iCur = 0;

         if(attr == 'opacity'){
             iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
         }else{
             iCur = parseInt(getStyle(obj, attr));
         }

         var iSpeed = (iTarget - iCur) / 8;
         iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

         if(iCur == iTarget){
             clearInterval(obj.timer);
         }else{
             if(attr == 'opacity'){
                 obj.style.filter = 'alpha(opacity='+ (iCur+iSpeed) +')';
                 obj.style.opacity = (iCur+iSpeed)/100;
             }else{
                 obj.style[attr] = iCur + iSpeed + 'px';
             }
         }

     }, 30);
 }
 </script>
 </head>

 <body>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </body>
 </html>

javascript每日一练（十一）——多物体运动的更多相关文章

  1. javascript每日一练（十）——运动二：缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  2. javascript每日一练（九）——运动一：匀速运动

    一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动 ...

  3. javascript每日一练（十三）——运动实例

    一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  4. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

  5. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  6. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  7. javascript学习-原生javascript的小特效（多物体运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul>       <li> ...

  8. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  9. javascript每日一练（八）——事件三：默认行为

    一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...

随机推荐

  1. [置顶] 基于.NET的快速信息化系统开发框架 — RDIFramework.NET — 系统目录

    基于.NET的快速信息化系统开发整合框架 —RDIFramework.NET—系统目录 框架简单介绍 .NET快速开发整合框架(RDIFramework.NET),基于.NET的快速信息化系统开发.整 ...

  2. .net 中文显示乱码问题(Chinese display with messy code)

    Case:同样的代码,本地开发环境(local is Chinese Simplify)可以成功运行,但是放到Windows Server 2008 R2(Local is United State) ...

  3. 使用OFFSET-FETCH进行数据过滤

    TOP的工业标准版 OFFSET-FETCH OFFSET 用来设置跳过行的数量 FETCH 用来设置检索多少行,必须要排序才能用,SQL Server 2012的新语法 从语意的角度来讲如果要跳开几 ...

  4. MAVEN入门（二）

    一.IDEA+MAVEN+Tomcat7 创建一个简单的Web app 1.用IDEA创建一个maven项目 注意: 红色部分一定要自己手选本地配置好的maven_home的地址,否则IDEA会选用内 ...

  5. Oracle 如何写出高效的 SQL

    转自:Oracle 如何写出高效的 SQL 要想写出高效的SQL 语句需要掌握一些基本原则,如果你违反了这些原则,一般情况下SQL 的性能将会很差. 1. 减少数据库访问次数连接数据库是非常耗时的,虽 ...

  6. Android 学习开发笔记《Android认识》

    1.          Android:2007年11月5日第一版,2009年5月豪华版,2010年HTC手机 2.          Android框架主要:应用程序.应用程序框架.函数库.运行时. ...

  7. QT自定义对象导入JavaScript脚本使用

    1.对象 项目属性要添加 QT += script自定义的对象头文件如下,实现正常就好,记得脚本里要调用的方法一定要定义在public slots:下,要不然调用时提示该对象没有*方法   #ifnd ...

  8. 一些安全相关的HTTP响应头

    转:http://www.2cto.com/Article/201307/230740.html 现代浏览器提供了一些安全相关的响应头,使用这些响应头一般只需要修改服务器配置即可,不需要修改程序代码, ...

  9. linux shell 执行多个命令的方法

    (1)在每个命令之间用:(分号)隔开. (2)在每个命令之间用&&隔开. &&表示:若前一个命令执行成功,才会执行下一个.这样,可确保所有的命令执行完毕后,其执行过程都 ...

  10. BZOJ 3196

    program bzoj3196; ; maxn=; maxm=; var n,m,time,temp:longint; root,a:..maxn] of longint; left,right,r ...