<!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. Setup Entity Framework Environment

    http://www.entityframeworktutorial.net/EntityFramework5/setup-entityframework-environment.aspx Entit ...

  2. Java中的private、protected、public和default的区别

        (1)对于public修饰符,它具有最大的访问权限,可以访问任何一个在CLASSPATH下的类.接口.异常等.它往往用于对外的情况,也就是对象或类对外的一种接口的形式. (2)对于protec ...

  3. UVa 514 (stack的使用) Rails

    练习一下stack的使用,还有要注意一下输入的格式,看了好长时间没懂. //#define LOCAL #include <iostream> #include <cstdio> ...

  4. jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动

    首先我们看两个连写注释 第一个:   /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...

  5. 《深入浅出嵌入式底层软件开发》—1. ARM汇编编程基础

    1.1 ARM CPU寄存器 ARM的汇编编程,本质上就是针对CPU寄存器的编程,所以要搞清楚ARM有哪些寄存器:ARM寄存器分为两类:普通寄存器和状态寄存器:普通寄存器一共有16个,分别为R0——R ...

  6. android系统掉电保护

    /************************************************************************ * android系统掉电保护 * 说明: * An ...

  7. django - raw sql - 注意点！

    现在的自己已经不怕mysql,已经熟悉了sql “搜索优化专家有时候都无法顾全所有,更何况ORM” 两种方法执行 sql原生语句 tablename.objects.raw() - 这样的语句,只能执 ...

  8. php里少用到的session_module_name，以及session的key值限制，简单将session存储为json格式数据的方法

    这个函数的作用就是动态的设置php.ini里的session_save_handler,配合session_set_savepath可以在程序里自由配置session的后台方式. session_ca ...

  9. Can't locate ExtUtils/MakeMaker.pm

    Can't locate ExtUtils/MakeMaker.pm 解决:yum install perl-ExtUtils-CBuilder perl-ExtUtils-MakeMaker

  10. Pig实战

    1. pig简介 2. 安装pig 3. 实战pig 4. 深入pig 5. 参考资料及代码下载 <1>. Pig简介  pig是hadoop项目的一个拓展项目, 用以简化hadoop编程 ...