<!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. AOJ 0525 - Osenbei

    http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=50785 翻译:http://blog.csdn.net/acm_10000h ...

  2. datagridview中combobox类型的cell选中一个下拉列表之后，立即生效的事件

    public event EventHandler CurrentCellDirtyStateChanged 当单元格的内容已更改,但更改尚未保存时,该单元格将标记为已修改. 此事件通常会在以下情况下 ...

  3. JSON 之 SuperObject(10): Merge、Clone、ForcePath

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

  4. UTC的相互转换(java)

      SimpleDateFormat foo = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); System.out.println(& ...

  5. UVa 1479 (Treap 名次树) Graph and Queries

    这题写起来真累.. 名次树就是多了一个附加信息记录以该节点为根的树的总结点的个数,由于BST的性质再根据这个附加信息,我们可以很容易找到这棵树中第k大的值是多少. 所以在这道题中用一棵名次树来维护一个 ...

  6. 最小生成树之Kruskal

    模板题,学习一下最小生成树的Kruskal算法 对于一个连通网(连通带权图,假定每条边上的权均为大于零的实数)来说,每棵树的权(即树中所有边的权值总和)也可能不同 具有权最小的生成树称为最小生成树 生 ...

  7. opengl截图

    int GetEncoderClsid(const WCHAR* format, CLSID* pClsid) { UINT num = ; // number of image encoders U ...

  8. a标签包input引起的问题

    最近公司中的一个项目中,有一个同事跟我说,他写的输入框不能选中输入内容了,并且光标也不能插入到已写好的文字其他位置. 简化了一下他的代码结构,如下: <a href="javascri ...

  9. HDU 3078 Network

    简单的  RMQ:  先预处理得到  所有 节点的 公共祖先  和  dfs 得到所有节点的父亲节点:  然后  询问时,从自己出发向上找父亲, 然后  得到所有的节点:排序一下 不知道  这题这样也 ...

  10. Less的学习（一）

    1.html部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...