<!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. pyhton与json,Xml

    对简单数据类型的encoding 和 decoding: 使用简单的json.dumps方法对简单数据类型进行编码,例如: 1 2 3 4 5 6 import json   obj = [[1,2, ...

  2. C++ STL 中erase()的使用需要小心

    C++ STL极大的方便了用户编写程序,但是同时一不小心也会犯一些错误,如erase()造成迭代器失效经常会引起错误. 错误示例: std::list< int> List; std::l ...

  3. WP7应用版本升级的实现方法

    首先必须要有一个服务提供升级推送查询 // Code to execute when the application is launching (eg, from Start)         //  ...

  4. jQuery 清除div内容

    $.ajax({            url: "SearchSN.aspx",            data: "SN=" + $("#txtS ...

  5. 使用C++读写Excel

    1.导入Excel类型库 使用Visual C++的扩展指令#import导入Excel类型库: 1 2 3 4 5 6 7 8 9 10 11 12 #import "C:\\Progra ...

  6. 一起学CUDA(一)

    前提是电脑的显卡支持CUDA,N卡一般是支持的,如果是A卡就没办法了.主要针对Windows环境,Linux和Mac也有相应的安装包.CUDA环境搭建:Step1:安装代码环境VS2010:Step2 ...

  7. 2015-10-15 晴 APUE GIT

    昨天看完了tcp/ip协议,快速的看完了这些内容,而且这里面的东西以前很熟悉,今天只是大概一看就想起以前用到的,什么时候用到的,以前在企智通上出过什么问题,后来如何解决的.我都有点佩服我的记忆.网络协 ...

  8. 隐藏 php apache 的版本号

    隐藏Apache版本信息 找到apache安装路径,譬如\Apache\conf\httpd.conf 修改httpd.conf ServerTokens ProductOnly ServerSign ...

  9. REDHAT YUM使用网易源

    刚装好了 RedHat 6 系统,但是使用 yum 的时候总是提示 nothing to do,并且什么都做不了.后来经过一番搜索才知道,红帽的 yum 在线更新是收费的,而且必须注册系统之后才能使用 ...

  10. 基于catalog 创建RMAN存储脚本

    --============================== -- 基于catalog 创建RMAN存储脚本 --============================== 简言之,将rman的 ...