js运动-链式运动、摩擦运动、缓冲运动、运动框架加入缓冲

最新推荐文章于 2019-10-02 23:41:20 发布

VIP文章 della_uii

最新推荐文章于 2019-10-02 23:41:20 发布

阅读量393

点赞数

分类专栏： JavaScript 文章标签：链式运动摩擦运动缓冲运动运动框架

本文链接：https://blog.csdn.net/Della_UI/article/details/53106616

版权

1、链式运动

<!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; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() {
    

    var oDiv1 = document.getElementById('div1');

    oDiv1.onclick = function() {
    

        startMove(this, {
            width : 200
        }, 10,function(){
    
            startMove(this,{
                height:200
            },10)
        });
    }

    function startMove(obj, json, iSpeed,fn) {
    
        clearInterval(obj.iTimer);
        var iCur = 0;

        obj.iTimer = setInterval(function() {
    

            var flag = true;

            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) {
                    flag = false;
                    if (attr == 'opacity') {
                        obj.style.opacity = (iCur + iSpeed) / 100;
                        obj.style.filter = '

最低0.47元/天解锁文章

della_uii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js运动-链式运动、摩擦运动、缓冲运动、运动框架加入缓冲

1、链式运动<!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: absolut
复制链接

扫一扫