<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}

</style>

<script>

window.onload = function() {

    var oDiv1 = document.getElementById('div1');

    oDiv1.onclick = function() {

        //下面的运动会清除掉上面的定时器

        /*startMove(this, 'width', 200, 10);

        startMove(this, 'height', 200, 10);*/

        startMove(this, {

            width : 200,

            height: 200

        }, 10);

    }

    function startMove(obj, json, iSpeed) {

        clearInterval(obj.iTimer);

        var iCur = 0;

        obj.iTimer = setInterval(function() {

            //定时器每走一下，就要把要运动的属性都推进一次

            for ( var attr in json ) {

                var iTarget = json[attr];

                if (attr == 'opacity') {

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

                } else {

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

                }

                if (iCur == iTarget) {

                    clearInterval(obj.iTimer);

                } else {

                    if (attr == 'opacity') {

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

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

                    } else {

                        obj.style[attr] = iCur + iSpeed + 'px';

                    }

                }

            }

        }, 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学习-基础运动

    多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...

  2. js动画 Css提供的运动 js提供的运动

    1.     动画 (1)      Css样式提供了运动 过渡的属性transition  从一种情况到另一种情况叫过渡 Transition:attr  time  linear  delay: ...

  3. JS实现缓存运动

                                                                                                      JS ...

  4. js中js数组、对象与json之间的转换

    在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如:JSON字符串:var str1 = '{ &quo ...

  5. [转]JS判断字符串是否为json数据

    原文地址:https://blog.csdn.net/qq_26400953/article/details/77411520 这周碰到了很多问题,尽量把遇到的问题都记录下来. JS判断字符串是否为j ...

  6. 转：JS中生成和解析JSON

    原文地址:JS中生成和解析JSON 1.JS中生成JSON对象的方法: var json = []; var row1 = {}; row1.id= "1"; row1.name ...

  7. js 数组、对象转json 以及 json转 数组、对象

    let jsonObj = $.parseJSON(jsonStr); //json字符串转化成json对象(jq方法) var jsonObj = JSON.parse(jsonStr); //js ...

  8. 【最简单的方法】js判断字符串是否为JSON格式（20180115更新）

    前言 针对 “js判断字符串是否为JSON格式” 这个问题,在网上查了许多资料,都没找到自己想要的答案. 但是看到这个帖子<js判断字符串是否为JSON格式>后,突然灵光一闪,想到一种很简 ...

  9. 前台的js对象数组传到后台处理。在前台把js对象数组转化为json字符串，在后台把json字符串解析为List<>

    前台的js对象数组传到后台处理.在前台把js对象数组转化为json字符串,在后台把json字符串解析为List<>

随机推荐

  1. [HDOJ2546] 饭卡 （01背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2546 先找出最贵的那个菜,这个菜一定是最后买的那个.然后再在前n-1个菜里做01背包.找出不超过m-5 ...

  2. Java类的初始化过程及清理

    一.类的数据成员初始化 Java中类的数据成员初试化可能有两种形式. 在定义类成员变量的地方直接提供初始化值(这是C++中不允许的) 在构造器中初试化.(Java中不存在类似C++中的初始化列表) 两 ...

  3. HeadFirst jsp 03 (MVC)

    创建一个小的 web 应用, mvc, 麻雀虽小, 五脏俱全 补1: servlet没有main()方法, 他们受控与另外一个Java应用, 这个Java应用称为 容器, tomcat就是这么一个容器 ...

  4. Machine Learning for hackers读书笔记(七)优化：密码破译

    #凯撒密码:将每一个字母替换为字母表中下一位字母,比如a变成b. english.letters <- c('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i' ...

  5. HDU 1058 Humble Numbers【DP】

    题意:给出丑数的定义,只含有2,3,5,7这四个素数因子的数称为素数.求第n个丑数. 可以先观察几个丑数得出规律 1:dp[1] 2:min(1*2,1*3,1*5,1*7) 3:min(2*2,1* ...

  6. 打印机C++

    m_prnDC.SetMapMode(MM_LOMETRIC);  m_iPrnX = m_prnDC.GetDeviceCaps(HORZRES);m_iPrnY = m_prnDC.GetDevi ...

  7. [转载] mysql5.6 删除之前的ibdata1文件后再重新生成，遇到[Warning] Info table is not ready to be used. Table 'mysql.slave_master_info' cannot be opened.问题

    [转载] mysql5.6 删除之前的ibdata1文件后再重新生成,遇到[Warning] Info table is not ready to be used. Table 'mysql.slav ...

  8. HDU 5344 MZL's xor (水题)

    题意:给一个序列A,设序列B的中的元素有(Ai+Aj)(1≤i,j≤n),那么求B中所有元素的异或之和.而序列A是这样来的:A1=0,Ai=(Ai−1∗m+z) mod l. 思路:相同的元素异或结果 ...

  9. 【Django】Python虚拟环境工具virtualenv

    教程 第一步:安装virtualenv $pip install virtualenv 第二步:开启虚拟环境的python $cd ENV/Scripts $activate.bat #启用virtu ...

  10. 【解题报告】[动态规划] CodingTrip - 携程编程大赛 （预赛第一场）- 聪明的猴子

    原题: 聪明的猴子 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Problem D ...