一、多物体运动

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

例子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. linux串口编程(c)

    //linux c: 串口设置//串口操作无非以下几个://1 打开                       //2 设置串口属性//3 read write //struct termios能够 ...

  2. win7 64下安装mysql-python报错的解决办法

    最近要使用django进行项目开发,需要使用mysql-python模块. 在本地搭建环境安装的时候却出现报错,Unable to find vcvarsall.bat  在网上找了很多资料,发现是w ...

  3. jacksonall的使用，解析json

    转自:http://www.cnblogs.com/lee0oo0/archive/2012/08/23/2652751.html , Jackson可以轻松的将Java对象转换成json对象和xml ...

  4. 无法将类型“ASP.login_aspx”转换为“System.Web.UI.WebControls.Login”

    今天碰上了一个很傻的问题,起码我认为是这样. 项目中首页名是:Login.aspx,编译.运行都没有出现问题. 于是打包发布网站,各项内容都配置好后,问题出现了.一运行首页面就出现下面这个错误: 编译 ...

  5. 手把手教你图片转ASCII码图

    效果图 基本思路 把图片每个像素点的信息拿出来,最重要的是拿到rgb的值 把每个像素点由rgb转成灰度图像,即0-255 给0-255分级,把每个等级的像素点转换成ascii码,完成 实现 第一步:获 ...

  6. WebService开发实例（Axis2实现，无需安装，快速实现）

    曾经做过的项目里涉及Android客户端向服务器发送请求,服务器访问数据库获得数据并返回给Android客户端.当时Android客户端与服务器的通信已经实现,我只负责客户端布局和数据呈现的部分,近日 ...

  7. QT学习 之 事件与事件过滤器（分为五个层次）

    事件 在Qt中,事件是作为对象处理的,所有事件对象继承自抽象类QEvent.此类用来表示程序内部发生或者来自于外部但应用程序应该知道的动作.事件能够能过被 QObject 的子类接受或者处理,但是通常 ...

  8. china-pub

    #!/usr/bin/env python                         #coding:utf-8import urllib2,re,sys,os,types            ...

  9. zkw好写吗

    codeforces果然名不虚传,仔细研读了该篇文章后感觉受益良多! 其实这篇文章探讨的就是zkw,其中的一些写法让我大开眼界,感觉是zkw那篇论文的又一个提升: 内存不再是2的幂了,直接就是\(2n ...

  10. 数据结构——栈(Stacks)

    栈遵循LIFO ( last in first out) 即后入先出原则 栈结构类似于叠盘子 后叠上去的要先拿走 才能拿到下面的盘子 因此stack是一种访问受限的线性存储结构 用单向链表的结构来存储 ...