js下落的方块

Html

Css

.div {
	float:left;
	width:50px;
	height:50px;
	background:red;
	margin-left:15px;
	position:relative;
	top:0px;
}

function getStyle(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}

function move(obj, attr, step, target, callback) {
    clearInterval(obj.timer); //undefined  null;
    //判断步长值是正还是负，处理一下
    step = parseInt(getStyle(obj, attr)) > target ? -step : step;
    obj.timer = setInterval(function() {
        //获取计算后的属性值，加上步长，赋给变量speed
        var speed = parseInt(getStyle(obj, attr)) + step;

if (speed < target && step < 0 || speed > target && step > 0) {
            speed = target;
        }
        //变化
        obj.style[attr] = speed + "px";
        //停止定时器
        if (speed == target) {
            clearInterval(obj.timer);
            callback && callback();
            //alert(speed);
        }
    }, 30);
}

window.onload = function() {
    var str = "";
    for (var i = 0; i < 15; i++) {
        str += "<div class='div'></div>";
    }
    document.body.innerHTML = str;

function down() {
        for (var i = 0; i < len; i++) {
            fn(i);
        };

function fn(i) {
            setTimeout(function() {
                move(aDiv[i], "top", 30, 600)
            }, 100 * i);
        }
    }

function up() {
        for (var i = 0; i < len; i++) {
            fn(i);
        };

function fn(i) {
            setTimeout(function() {
                move(aDiv[i], "top", 30, 0)
            }, 100 * i);
        }
    }

};

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js下落的方块



代码描述：下落的方块运动效果原生

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

袖~牙

相关代码

js下落的方块

最新