运动框架

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

例子：

 <!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. Swift调用Objective C的FrameWork

    很多Github的库经过很多年的发展,源码都是OC写的,,所以,用Swift调用OC的库就是开发中难免遇到的的一个问题,本文以AFNetworking为例,讲解如何跨语言调用. 第一步 创建一个空的工 ...

  2. Memory Architecture-SGA-Database Buffer Cache

    启动instance:1.分配内存空间SGA 2.启动后台进程 内存结构:1.SGA 2.PGA 3.UGA 4.Software code areas SGA components:1.Databa ...

  3. iOS中的 SB和XIB的前世今生

    今天给大家介绍一下Apple开发中三种几种常用的应用程序编写方式:纯代码创建.使用storyboard/XIB.我们都知道,纯代码编写模式适合大型项目大规模使用,利于版本管理.追踪改动以及代码合并,代 ...

  4. JS 排列组合

    function $CL(arr, n, noLC, arrDan) { //从arr中取n个组合,然后 var r = [], sum = 0; n = n - arrDan.length; (fu ...

  5. 【node.js】本地模式安装express：'express' 不是内部或外部命令，也不是可运行的程序或批处理文件。

    今天闲来无事想起了node.js,因此到网上下载了一个node.js的安装程序进行安装.其中: 安装程序:node-v0.11.13-x64.msi PC系统:Windows 7 自定义安装路径:D: ...

  6. runtime的概念,message send如果寻找不到相应的对象,如何进行后续处理

    运行时刻是指一个程序在运行(或者在被执行)的状态.也就是说,当你打开一个程序使它在电脑上运行的时候,那个程序就是处于运行时刻.在一些编程语言中,把某些可以重用的程序或者实例打包或者重建成为“运行库”. ...

  7. 如何通过java反射将数据库表生成实体类？

    首先有几点声明: 1.代码是在别人的基础进行改写的: 2.大家有什么改进的意见可以告诉我,也可以自己改好共享给其他人: 3.刚刚毕业,水平有限,肯定有许多不足之处: 4.希望刚刚学习java的同学能有 ...

  8. linux 进程通信

    IPC: 管道,FIFO,信号,消息队列(system v/ posix),共享内存(system v/  posix),socket 同步机制: 互斥锁,条件变量,记录上锁, 信号量(system ...

  9. Linux上MongoDB的安装与配置

    长话短说,一共有两种方法.(我随便选了一个发行版Mint) 一.apt-get方法 官网上说的很清楚: http://docs.mongodb.org/manual/tutorial/install- ...

  10. ZOJ 1825 compoud words

    题目大意:输入一串递增的单词序列,需要找出符合条件的单词递增输出,条件是:将一个单词拆成左右两个单词后,能在输入中找到这两个单词.例如单词 alien,可以拆成 a 和 lien,而输入中刚好同时有a ...