<!doctype html>

<html>

    <head>

        <meta charset = "utf-8">

        <title>未命题</title>

        <style>

            *{margin: 0;

                padding: 0;

            }

            #div1{

                height: 100px;

                width: 100px;

                background: red;

                margin-left: 200px;

            }

        </style>

        <script>

            window.onload = function ()

            {

                odiv1 = document.getElementById('div1');

                odiv1.onclick = function ()

                {

                    startMove(this,{

                        width:200,

                        height:300

                    }

                    ,10)

                }

                function startMove (obj,json,speed)

                {

                    clearInterval(obj.timer);

                    var icur = 0;

                    obj.timer = setInterval(function(){

                        var ibtn = true;

                        for(var attr in json)

                        {

                            var goal = json[attr];

                            if(attr == 'opacity')

                            {

                                icur = Math.round(css(obj,'opacity')*100);

                            }

                            else

                            {

                                icur = parseInt(css(obj,attr));

                            }

                            if(icur != goal)

                            {

                                ibtn = false;

                                if(attr == 'opacity')

                                {

                                    obj.style.opacity = (iCur + iSpeed) / 100;

                                    obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';

                                }

                                else

                                {

                                    obj.style[attr] = icur + speed + 'px';

                                }

                            }

                        }

                        if(ibtn)

                        {

                            clearInterval(obj.timer);

                        }

                    },30);

                }

                function css(obj,attr)

                {

                    if(obj.currentStyle)

                        return obj.currentStyle[attr];

                    else

                        return getComputedStyle(obj,false)[attr];

                }

            }

        </script>

    </head>

    <body>

        <div id="div1"></div>

    </body>    

</html>

js运动 多物体运动含Json 但是里面数值不一样的更多相关文章

  1. js多个物体运动问题2

    问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...

  2. js多个物体运动的问题1

    问题2 http://www.cnblogs.com/huaci/p/3854304.html 用js写一个物体的运动很简单.如果一个页面有多个物体在运动,它会不会出问题呢? ok,我们来看一个示例 ...

  3. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  4. JS定时器做物体运动

    JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么? ...

  5. js实现多物体运动框架并兼容各浏览器

    首先,我们须要知道在js中获取对象的宽度如offsetWidth等.可能会存在一些小小的bug.原因之中的一个在于offsetWidth只不过获取盒子模型中内容的部分宽度.并不包括内边距,边框和外边距 ...

  6. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  7. js动画之多物体运动

    多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...

  8. [js]多个物体的运动

    与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj.另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳 window.onload=func ...

  9. js动画之同时运动

    一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. Support Library(5)在eclipse中导入SupportXXXDemos

    Support4Demos只用一个v4.,Support7Demos只要v13.jar, SupportAppNavigation只要一个v4.jar. Support7Demos 需要资源全部v7系 ...

  2. vs2015中安装EntityFramework

    在项目上右键,然后选择Manage NuGet Packages 搜索EntityFramework,然后Install accept Attempting to gather dependencie ...

  3. 选择——ERP信息系统选型

    做一次选择并不难,难的是做一次坚定而正确的选择.TCL电脑公司的ERP软件选型就是一次正确而艰难的选择过程.让我们从头说起吧!­ 业界都知道TCL电脑是IT行业的新入行者,更知道TCL的另一个诠释:& ...

  4. Perl文件读写

    Perl File Handling: open, read, write and close files #==================== Opening files Solution 1 ...

  5. Restrict each user to a single session in window server 2008 R2 or 2012

    Restrict each user to a single session in window server 2008 R2 or 2012 2014-10-31 In window server ...

  6. 《OD学hadoop》Hadoop前置

    一.Hadoop 前置课程 1. Linux系统,基本命令 2. Java语言,JavaSE相关知识 3. MySQL基本的DML和DDL SQL on Hadoop

  7. tomcat启动时报:IOException while loading persisted sessions: java.io.EOFException的解决方案

    错误代码如下: 严重: IOException while loading persisted sessions: java.io.EOFException java.io.EOFException ...

  8. hibernate4 二级缓存demo实例

    转载:http://blog.csdn.net/chaoowang/article/details/21236501 hibernate使用版本是:hibernate-release-4.3.4.Fi ...

  9. LA 4725 (二分) Airport

    题意: 有W.E两个跑道,在每个时刻每个跑道的飞机都从0开始编号,而且每个时刻都有Wi和Ei架飞机到达这两个跑道.而且每个时刻只能选择一个跑道的一架飞机起飞.问如何选择才能使得飞机的最大编号最小.(每 ...

  10. POJ 3287 (基础BFS) Catch That Cow

    这是做的第一道BFS,很基础很简单的题目 广度优先搜索算法如下:(用QUEUE)(1) 把初始节点S0放入Open表中:(2) 如果Open表为空,则问题无解,失败退出:(3) 把Open表的第一个节 ...