javascript运动框架---2--缓冲运动

最新推荐文章于 2020-09-22 12:14:06 发布

qiangD

最新推荐文章于 2020-09-22 12:14:06 发布

阅读量524

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qiangD/article/details/47276631

版权

javascript 专栏收录该内容

23 篇文章

订阅专栏

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        width: 100px;
        height: 100px;
        background: red;
        border: 1px solid green;
        position: absolute;
        right: 0;
        top: 500px;
        z-index: 1000;
    }

    textarea {
        position: fixed;
        left: 0;
        top: 100px;
    }

    button {
        position: fixed;
        left: 0;
        top: 300px;
        width: 100px;
        height: 30px;
    }

    span {
        width: 1px;
        height: 100px;
        border-right: 1px solid black;
        position: absolute;
        left: 300px;
        top: 0;
    }
    </style>
</head>

<body style="height:3000px;">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <div>div1</div>
    <span></span>
    <button>开始运动</button>
    <script src="test.js"></script>
    <script>
    window.onload = function() {
        var oDiv1 = document.getElementsByTagName('div')[0];
        var oBtn = document.getElementsByTagName('button')[0];

        window.onscroll = function() {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var t = st + (document.documentElement.clientHeight || document.body.clientHeight) / 2;
            move(oDiv1,parseInt(t));
            // console.log(2);
        }

    }
    </script>
</body>


/**
 * [getStyle 获取计算出来的样式]
 * @param  {[type]} obj  [元素对象]
 * @param  {[type]} attr [属性名]
 * @return {[type]}      [对应属性名的值]
 */
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        // IE
        return obj.currentStyle[attr];
    } else {
        // 其他
        return getComputedStyle(obj, false)[attr];
    }
}
var timer = null;

var alpha = 38;

function move(obj, target) {
    // 宽度动画

    // 解决重复触发定时器
    clearInterval(timer);
    timer = setInterval(function() {

        var top = parseInt(getStyle(obj, 'top'));

        if (top < target) {
            speed = 10;
        } else {
            speed = -10;
        }

        if (top == target) {
            clearInterval(timer);
        } else {
            obj.style.top = top + speed + 'px';
        }

        var oTextarea = document.getElementsByTagName('textarea')[0];
        oTextarea.value += top + '\n';

    }, 30);

}

这里写图片描述