<!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. Objective-C 类的继承、方法的重写和重载

    一.类的继承 Objective-c中类的继承与C++类似,不同的是Objective-c不支持多重继承,一个类只能有一个父类,单继承使Objective-c的继承关系很简单,易于管理程序.Objec ...

  2. MyEclipse 10离线安装PyDev插件

    PyDev for Eclipse, 经过测试,一般在线安装会失败(不能访问某些网站所致) 以下为离线安装步骤 1 下载 PyDev 2.8.2,  链接:http://sourceforge.net ...

  3. 谈谈Perforce

    实习就要结束了,收获之一就是学会了使用Perforce! Perforce SCM System是一款构建于可伸缩客户/服务器结构之上的软件配置管理工具.仅仅应用 TCP/IP,开发人员就能够通过多种 ...

  4. 在AChartEngine上绘图，手指标记当前位置

    最近要做一个绘图项目,需要在ACE折线图上再绘出一条红标记当前坐标,经过这几天研究,可以给大家分享一下了.先上效果图吧! 代码里的注释还是比较清楚,就不作说明了. package com.exampl ...

  5. plsql programming 04 条件和顺序控制

    1. 条件语句 if salary > 40000 or salary is NULL then give_bonus(employee_id, 500); end if; if conditi ...

  6. sqlserver重命名字段名称

    EXEC sp_rename 'S2BASE_PRODUCT.[PRODUCT_ID]','TABTYPE_ID','COLUMN';

  7. Qt之显示网络图片

    简述 Qt中包含了网络模块-network,我们可以很容易的进行各种网络编程和数据传输,关于network的类很多,其中包含:支持DNS.HTTP.TCP/UDP等众多高级类,可以参考助手. 下面我们 ...

  8. iOS富文本（二）初识Text Kit

    概述 Text Kit 是建立在Core Text上的文本布局系统,虽然没有Core Text那么强大的文本处理功能,但是对于大多数常见的文本布局用Text Kit能够很简单的实现,而不是用Core ...

  9. Hadoop实战课程

    Hadoop生态系统配置Hadoop运行环境Hadoop系统架构HDFS分布式文件系统MapReduce分布式计算(MapReduce项目实战)使用脚本语言Pig(Pig项目实战)数据仓库工具Hive ...

  10. C#多态;父类引用指向子类对象;new和override的区别;new、abstract、virtual、override，sealed关键字区别和使用代码示例;c#类的初始化顺序

    关于父类引用指向子类对象 例如: 有以下2个类 public class Father { public int age = 70; public static string name = " ...