<!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. pyhton类集成

    class SchoolMember:   def __init__(self,name,age):     self.name = name     self.age = age     print ...

  2. Android模拟器分辨率介绍

    转自: http://www.cnblogs.com/xrtd/p/3746935.html 本人喜欢用  HVGA(320x480) Skins:HVGA.HVGA-L.HVGA-P.QVGA-L. ...

  3. 安全删除mysql binlog日志

    命令行下执行 show binary logs; purge binary logs to 'mysql-bin.000070';

  4. jQuery_添加与删除元素

    一.jQuery添加元素(通过 jQuery,可以很容易地添加新元素/内容.) 1.添加新的 HTML 内容,用于添加新内容的四个 jQuery 方法(都能解析HTML标签): append() - ...

  5. HDU 2063 (匈牙利算法) 过山车

    有m个妹子和n男生,男生和女生之间互相有好感则连一条线,问最多能撮合出多少对 这篇博文写的很好,没有让人望而生畏的图论术语 http://blog.csdn.net/dark_scope/articl ...

  6. UINavigationController的使用

    1.UINavigationController使用流程 UINavigationController为导航控制器,在iOS里经常用到. 我们看看它的如何使用: 下面的图显示了导航控制器的流程.最左侧 ...

  7. zoj 2105 Lifting the Stone

    题意   裸的计算几何  求多边形重心: #include<iostream> #include<stdio.h> #include<cstring> #inclu ...

  8. MySQL基础之第17章 MySQL日志

    17.1.日志简介 二进制日志错误日志通用查询日志慢查询日志 17.2.二进制日志 二进制日志也叫作变更日志(update log),主要用于记录数据库的变化情况.通过二进制日志可以查询MySQL数据 ...

  9. 用于科创的git log美化输出

    git log --reverse --pretty=format:'%cd %s' --date=short > a.txt 更好的: git log --reverse --pretty=f ...

  10. http报头正文开头会有一个整数的问题

    HTTP/.0 200 OK (省略一些东西...) Content-type:text/html 正文内容 这是我用Arduino访问某个php得到的结果 如果我在php里头输出1000个字符或更少 ...