<!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. POJ-2718 Smallest Difference

    http://poj.org/problem?id=2718 从一些数里面选择一个子集组成一个数,余下的数组成另外一个数,(数不能以0开头)问两个数的差的绝对值最小是多少! 不管是奇数还是偶数,要想绝 ...

  2. JSON 之 SuperObject(9): TSuperType

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  3. 在DirectX 中进行2D渲染

    http://flcstudio.blog.163.com/blog/static/756035392008115111123672/ 最近,我看到很多关于DirectX8在最新的API中摒弃Dire ...

  4. poj 2192 (DP)

    这个题题目意思是给你三个字符串str1,str2,str3.将str3从左自右扫描,去匹配str1和str2中的元素,不可重复,若存在一种匹配方法使得str1和str2都被匹配完全了,则输出yes,否 ...

  5. UVa 10106 Product

    高精度乘法问题,WA了两次是因为没有考虑结果为0的情况.  Product  The Problem The problem is to multiply two integers X, Y. (0& ...

  6. HDU 4513 吉哥系列故事——完美队形II

    变形的Manacher算法,在扩展的时候要加入限制条件,满足题目中说的从左到中间身高不减. 其他地方倒是没有什么改动.. //#define LOCAL #include <iostream&g ...

  7. HDU 1548 (最基础的BFS了) A strange lift

    这是一维的BFS,而且没有什么变形,应该是最基础的BFS了吧 题意: 有这样一个奇葩的电梯,你在第i层的时候你只能选择上或者下Ki层,也就是你只能从第i层到达i+Ki或者i-Ki层.当然电梯最低只能在 ...

  8. VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程

      开篇语:最近在弄ocx控件发布到asp.net网站上使用,就是用户在使用过程中,自动下载安装ocx控件.(此文章也是总结了网上好多人写的文章,我只是汇总一下,加上部分自己的东西,在这里感谢所有在网 ...

  9. [反汇编练习] 160个CrackMe之022

    [反汇编练习] 160个CrackMe之022. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  10. I.MX6 ov5640 camera

    /************************************************************************ * I.MX6 ov5640 camera * 说明 ...