运动框架

　　可以实现多物体任意值运动

例子：

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>运动框架</title>
 <style>
 #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; opacity:0.3; filter:alpha(opacity=30);}
 </style>
 <script>
 window.onload = function()
 {
     var oBtn = document.getElementById('btn1');
     var oDiv = document.getElementById('div1');

     oBtn.onclick = function()
     {
         startMove(oDiv, {width:200, height:200, opacity:100}, function(){
             startMove(oDiv, {width:100, height:100, opacity:30});
         });
     };
 };

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

 function startMove(obj, json, fn)
 {
     clearInterval(obj.timer);

     obj.timer = setInterval(function(){
         var bStop = true;
         for(var attr in json){
             var iCur = 0;

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

             var iSpeed = (json[attr] - iCur)/8;
             iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

             if(iCur != json[attr]){
                 bStop = false;
             }            

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

         }

         if(bStop){
             clearInterval(obj.timer);
             if(fn){
                 fn();
             }
         }
     }, 30);
 }
 </script>
 </head>

 <body>
 <input id="btn1" type="button" value="运动"/>
 <div id="div1"></div>
 </body>
 </html>

javascript每日一练（十二）——运动框架的更多相关文章

  1. javascript每日一练（二）——javascript（函数，数组）

    一.函数 什么是函数 function show(){}//不带参数 function show(){return 123;}//不带参数,有返回值 function show(arg1, arg2, ...

  2. J2EE进阶(十二)SSH框架整合常见问题汇总(三)

    在挂失用户时,发现userid值为空,但是在前台输入处理账号22时,通过后台输出可以看出,后台根据前端输入在数据库中查询到结果对象并输出该对象的userid,而且Guashi对象也获取到了其值. 解决 ...

  3. JavaScript -- 时光流逝（十二）：DOM -- Element 对象

    JavaScript -- 知识点回顾篇(十二):DOM -- Element 对象 (1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键 ...

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

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

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

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

  6. javascript每日一练—运动

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

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

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

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

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

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

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

随机推荐

  1. HDU-4866-Shooting(函数式线段树)

    Problem Description In the shooting game, the player can choose to stand in the position of [1, X] t ...

  2. Spring源码地址和相关介绍的网址

    Spring源码地址下载: https://github.com/spring-projects/spring-framework/tags >多图详解Spring框架的设计理念与设计模式:ht ...

  3. Java之对象序列化和反序列化

    一.对象序列化和反序列化存在的意义: 当你创建对象,只要你需要,他就一直存在,但当程序结束,对象就会消失,但是存在某种情况,如何让程序在不允许的状态,仍然保持该对象的信息.并在下次程序运行的时候使用该 ...

  4. Cobbler自动化部署

    一:PXE.Kickstart与Cobbler的概念: PXE(preboot execute environment,预启动执行环境)是由Intel公司开发的技术,需要网卡的硬件支持,工作于C/S的 ...

  5. git 删除右键菜单

    cmd进入"C:\Program Files (x86)\Git\git-cheetah"目录,运行regsvr32 /u git_shell_ext(64).dll

  6. 戴尔CEO：我们将专注于企业 而非手机业务

    9月13日消息,据国外媒体报道,戴尔公司董事长兼首席执行官迈克尔·戴尔(Michael Dell)周五接受了CNBC采访,谈了他对戴尔未来的打算.此前一天,迈克尔·戴尔提出的以250亿美元将戴尔私有化 ...

  7. 最新Android ADT, SDK, SDK_tool等官方下载说明（及时更新）

    1.Android SDK starter package SDK starter package http://dl.google.com/android/installer_r08-windows ...

  8. OracleDBConsoleorcl无法启动

    OracleDBConsoleorcl无法启动 向左转|向右转 提问者采纳  2010-10-13 19:40 我前几天刚解决了这个问题 这个错误原因是因为你的ip是动态获取的,你在安装Oracle时 ...

  9. git 使用过程（一、准备工作）

    没有多余的废话,只是纯粹的捞干的记录下一自己使用Git的过程.(正在学习中,也是刚接触,记录过程可能有点乱.等熟悉之后在重新整理一下) 一.先下载git客户端 网址:http://msysgit.gi ...

  10. 循环次数（ M - 暴力求解、打表）

    循环次数 Description           我们知道,在编程中,我们时常需要考虑到时间复杂度,特别是对于循环的部分.例如,         如果代码中出现         for(i=1;i ...