<!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. AI中去掉页面边框

    其实也没啥说的,就是很多人在百度中问这个在AI中这样除去页面边框,其实很简单,用快捷组合键  ctrl+shift+H  就行啦,边框自己就没了

  2. Bootstrap介绍以及配置

    一.Bootstrap概述: 1.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的一个用于快速开发 Web 应用程序和网站的前端框架. 2.用于开发响应式布局.移动设备优先的 W ...

  3. ADO与ADO.NET的区别与介绍

    1. ADO与ADO.NET简介ADO与ADO.NET既有相似也有区别,他们都能够编写对数据库服务器中的数据进行访问和操作的应用程序,并且易于使用.高速度.低内存支出和占用磁盘空间较少,支持用于建立基 ...

  4. CodeIgniter 3之Session类库(2)（转）

    CI3的Session的重大改变就是默认使用了原生的Session,这符合Session类库本来的意思,似乎更加合理一些.总体来说,虽然设计理念不同,但为了保证向后兼容性,类库的使用方法与CI2.0的 ...

  5. php 使用phpmailer 发送邮件(附带中文乱码的解决方法)

    下载phpmailer ,在程序里包含class.phpmailer.php 类  ,这里有中文乱码的解决方法 实例代码如下 <html> <head> <title&g ...

  6. 2016第20周四java基础概念

    简单的说JDK=JRE+Java编译器.调试器.工具类库等:JRE=JVM(类似于jre目录下的bin)+必要运行的类库(类似于jre目录下的lib) JVM:Java Virtual Mechina ...

  7. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Symfony2学习笔记之HTTP Cache

    富web应用程序的本质意味着它们的动态.无论你的应用程序多么有效率,每个请求比起静态文件来说总会存在很多的耗费.对于大多数web程序来说,这没什么. Symfony2非常的轻快,无论你做些严重超载的请 ...

  9. DataReader方式 获取数据的操作

    一.使用DataReader读取为对象List /// <summary> /// 获得数据列表List<>,DataReader 使用参数的 /// </summary ...

  10. DDoS攻防战（二）：CC攻击工具实现与防御理论

    我们将要实现一个进行应用层DDoS攻击的工具,综合考虑,CC攻击方式是最佳选择,并用bash shell脚本来快速实现并验证这一工具,并在最后,讨论如何防御来自应用层的DDoS攻击. 第一步:获取大量 ...