运动框架

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

例子：

 <!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. C#中Cache用法

    C#中Cache用法     Cache 是分配在服务器上的一个公共的内存片,所谓公共指的cache只要一创建是任何一个客户端浏览器都可以通过后台代码访问到它,它面向的是所有用户,相对而言sessio ...

  2. 带参数的存储过程和标量Function

    在SQL Server中,我们通常会使用NEWID(),GETDATE(),等一些数据库函数,这些函数是很有帮助的,然后数据库也能够让我们自己写函数,即Function,下面简单说说Function的 ...

  3. js中的typeof

    typeof的几种返回结果的分类: 转自:http://www.360doc.com/content/14/0718/15/8790037_395279403.shtml typeof运算符介 绍:t ...

  4. windos下安装PEAR 注意

    1.在这里下载PEAR http://pear.php.net/go-pear.phar 在页面右键另存为 go-pear.phar 到PHP的根目录,并去目录查看是否保存为了go-pear.phar ...

  5. r语言之生成随机序列，随机数生成函数及用法

    (1)生成正态分布随机数: rnorm(n,mean,sd)     其中,n表示生成的随机数个数,mean表示正态分布均值,sd表示正态分布标准差 > rnorm(5,0,2)[1] -5.3 ...

  6. vagrant 入门4

    7. 打包 Packaging , 8080 end 2. 打包Project $ vagrant package --vagrantfile Vagrantfile.pkg 8. 打包完成后,在工程 ...

  7. 条码知识之十：EAN-128条码(下)

    国际物品编码协会(EAN)和美国统一代码委员会(UCC)将CODE-128码引入EAN/UCC系统,并作如下规定:起始符由一个START A/B/C 加一个辅助字符FNC1构成,以区别普通的CODE- ...

  8. Vijos P1740聪明的质检员

    题目 描述 小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有n个矿石,从1到n逐一编号,每个矿石都有自己的重量wi以及价值vi.检验矿产的流程是:1.给定m个区间[Li,Ri]:2. ...

  9. BZOJ 1619: [Usaco2008 Nov]Guarding the Farm 保卫牧场

    题目 1619: [Usaco2008 Nov]Guarding the Farm 保卫牧场 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 491  S ...

  10. 数据结构——链表（linkedlist）

    基本分类: 1.单向链表 2.带尾指针的单向链表 3.双向循环链表 以下分类进行说明 1.单向链表 基本元素:*front //头节点 *next //下一节点 声明:node<T>*p; ...