<!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. ZOJ Problem Set - 3865 Superbot (bfs)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5477 大牛博客:http://www.cnblogs.com/kylehz/p ...

  2. from 表单提交

    html端代码 <body> <div id="dlg" class="easyui-panel" buttons="#dlg-bu ...

  3. spring 定时器设置每隔10秒触发

    <property name="cronExpression" value="0/10 * * * * ?" />

  4. mysql分区（partition）

    1)按范分区(range) partition by range(Year(birthday))( partition p0 values less than 1960, partition p1 v ...

  5. acdream 1686 梦醒（时钟重合）

    Problem Description 娜娜离开了这个王国,走向远方,在旷野上,娜娜看到了一个大时钟,上面的时针分针秒针都在缓缓转动,那只挥着翅膀的天使又出现了,天使说:“外面天已经亮了,娜娜你别睡过 ...

  6. 对于fmri的hrf血液动力学响应函数的一个很直观的解释-by 西南大学xulei教授

    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% clear all;clc; %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ...

  7. android 相对布局

    RelativeLayout布局 android:layout_marginTop="25dip" //顶部距离 android:gravity="left" ...

  8. 【Unity3D】模仿制作“神庙逃亡”吃金币后金币飞出屏幕效果

    [前言] 玩过“神庙逃亡”的应该都知道,这款游戏不论从游戏流畅度.人物动画.场景的管理都很棒. 自己也做了一款简单的跑酷游戏,实现了简单的吃金币效果,但是发现不好看,于是就想模仿“神庙逃亡”中的这个效 ...

  9. 一条sql导致数据库整体性能下降的诊断和解决的全过程

    今天早上一来,数据库load就比往常高了许多.想想数据库唯一的变化是昨天早上我曾经重新分析过数据库对象. [@more@] 发现数据库load很高,首先看top发现没有特别异常的进程,在数据库中适时抓 ...

  10. xxx

       <div style="position:absolute;left:0px;top:50px;width:1300px;height:550px;"><d ...