zoukankan html css js c++ java

js运动多数据运动含JSON

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {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>

查看全文

相关阅读:
docker容器升级脚本
 Haproxy状态监控配置教程
 负载均衡之Haproxy配置详解（及httpd配置）
升级代码脚本
 升级数据库脚本（加入事务）
监控端口，新疆模拟用户登录脚本
 mongodb3.2系统性学习——3、update()操作
 Java Socket编程
 php错误级别设置
 php 用于绘图使用的颜色数组

原文地址：https://www.cnblogs.com/mayufo/p/4328752.html

js运动 多数据运动 含JSON

js运动多数据运动含JSON