运动框架

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

例子：

 <!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. 柯里化函数之Javascript

    柯里化函数之Javascript 定义 依据定义来说,柯里化就是将一个接收"多个"參数的函数拆分成一个或者很多个接收"单一"參数的函数.定义看起来是比較抽象的. ...

  2. Port 8081 already in use, packager is either not running or not running correctly

    运行 react_native 时发生这个错误,解决办法 关掉端口8081对应的进程 1.打开终端,输入命令:lsof -i:8081 2.此时提示: COMMAND   PID    USER   ...

  3. 使用RadioGroup与RadioButton实现多选一

    RadioGroup是RadioButton的集合, RadioGroup里面可以包含很多RadioButton,提供多选一机制,只能选择其中一个 RadioGroup的orientation(方向) ...

  4. 条款21： 必须返回对象时，不要强行返回对象的reference

    总结: 绝不要返回一个local栈对象的指针或引用:绝不要返回一个被分配的堆对象的引用:绝不要返回一个静态局部对象(为了它,有可能同时需要多个这样的对象的指针或引用). 条款4中给出了“在单线程环境中 ...

  5. NET Core1

    NET Core .net core最近园子讨论频率很高的话题,从不久前发布正式版本后,也是开始从netcore官网一步一步走向学习之路:.net跨平台的设计让人很是兴奋起来,因为做了多年的互联网研发 ...

  6. ie条件注释还能这样写

    通过条件注释给html开始标签定义不同的class, 来区分不同版本的IE,可以在样式表中避免 样式属性hack (如 _margin-top, *float:none ) 注意: IE10+不支持条 ...

  7. 投票系统前台 C#，数据库SQL

    ------------vote.aspx.cs--------------------  private void Page_Load(object sender, System.EventArgs ...

  8. stackoverflow,stackexchange,zhihu,ilewen,segmentfault,answerhub,question2answer,,

    http://stackexchange.com/ http://question2answer.org/ http://answerhub.com/qa/ http://segmentfault.c ...

  9. 使用msys

    下载地址:http://msys2.github.io/ 更新:pacman -Syu 安装git:pacman -S git 或者使用cygwin 调色:编辑~/.minttyrc Foregrou ...

  10. java学习之内省

    反射加内省解决耦合问题 package com.gh.introspector; /** * JavaBean * @author ganhang * */ public class Dog { pr ...