运动框架

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

例子：

 <!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. 同一个shell下实现多个composite的切换

    SWT实现面板切换可以采用StackLayout来实现,通过topControl来实现置顶,但是置顶之后要记得调用父组件的layout方法.否则会不显示,应该所有改变组件布局的情况都要进行父组件的重新 ...

  2. C#利用委托跨线程更新UI数据

    转:http://www.2cto.com/kf/201206/136587.html 在使用C#的过程中,难免会用到多线程,而用多线程之后,线程如何与界面交互则是一个非常头疼的问题.其实不仅仅是界面 ...

  3. Angular JS 学习笔记（一）

    1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net ...

  4. Spring注解配置

    配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...

  5. 在Outlook中设置QQ邮箱

    原本以为在Outlook中设置QQ邮箱没多大难度,但我错了,估计错了腾讯的麻烦程度,故记录下来. ----- 打开Outlook 2013(Outlook 2010也差不多),若是第一次打开会提示你设 ...

  6. 使用python操作RabbitMQ,Redis,Memcache,SQLAlchemy 其一

    一.概念 1.Memcached     Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态 ...

  7. Code 49 码

    Code 49码是一种多层.连续型.可变长度的条码符号,它可以表示全部的128个ASCII字符.每个Code 49条码符号由2到8层组成,每层有18个条和17个空.层与层之间由一个层分隔条分开.每层包 ...

  8. Qt之OpenSSL（有pro文件的路径格式）

    简述 OpenSSL是一个强大的安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. 简述 下载安装 使用 更多参考 下载安装 ...

  9. 基于visual Studio2013解决C语言竞赛题之0403字符统计

      题目 解决代码及点评 这道题的目标是锻炼while循环,while循环的语法是 while(循环条件) { 循环体; } 每次进入循环体之前,先判断循环条件是否满足,如果不满足,执行序列就 ...

  10. POJ-1003&1004

    这两题比较简单,就不做分析了,描述下题目,就上代码吧. [题目描述] 1003,其实就是求这个方程的最小n:1/2 + 1/3 + 1/4 + ... + 1/(n + 1) >= c: 100 ...