运动框架

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

例子：

 <!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. poj 2263&& zoj1952 floyd

    Fiber Network Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2725   Accepted: 1252 Des ...

  2. new[] class deconstructor

    Class class(); Class *class1=new class; class1=&class; delete class1;   // Assert 指针指向的是一个栈中的对象, ...

  3. Week 5a - Mouse input and more lists----learning notes

    pyton 程序内容的颠倒,运用 [](列表) def reverse_string(s): """Returns the reversal of the given s ...

  4. NetBeans文件被锁，无法修改

    今天用NetBeans写有关Dojo的一个样例时,出现文件被锁,无法修改的情况.找了半天,但是就是不知道是什么原因,我就写在博客上记录下来

  5. easyui学习日记20141213

    一.前言 对于页面的设计一直都不是很懂.看到easyui样式简洁大方的样子,就心里痒痒,趁这段时间工作没什么项目的同时充充电.同时给自己做个笔记吧. 首先需要下载easyui的包,有两种版本,支持GP ...

  6. Week14（12月9日）

    Part I:提问 =========================== 1.ASP.NET MVC围绕事件驱动的页面声明周期而建立,在渲染的页面上可以触发事件. 2.ASP.NET MVC脱离了H ...

  7. 启动（Startup）

    Startup Chrome是一个单一的可执行程序.它清楚如何运行其它进程. 下面是chrome启动的概述: 1. 首先,chrome有一个平台相关的入口点:在windows上是wWinMain(): ...

  8. literal控件的例子

    Literal的Mode属性,举例说明 这个属性的枚举值:PassThrough  Encode  Transform <%@ Page Language="C#" Auto ...

  9. Fedora 17 安装 完全 指南

    一.了解Fedora 17先来了解一下Fedora吧.它是由Red Hat赞助的一个全球性开源项目,秉承“自由”.“友爱”.“杰出”.“前卫”宗旨. 1.Fedora 17的主要系统改进内核:采用3. ...

  10. 2-06. 数列求和（20）（ZJUPAT 数学）

    题目链接:http://pat.zju.edu.cn/contests/ds/2-06 给定某数字A(1<=A<=9)以及非负整数N(0<=N<=100000).求数列之和S ...