zoukankan      html  css  js  c++  java
  • 匀速运动的封装

        function animate(obj,endPosition,speed) {
            clearInterval(obj.timer);
            var speed = obj.offsetLeft > endPosition ? -speed : speed;
            obj.timer = setInterval(function () {
                var judgeDot = Math.abs(obj.offsetLeft - endPosition);
                obj.style.left = obj.offsetLeft + speed + 'px';//judgeDot changes with this interval.So this sentence should be in the interval;
                if(judgeDot <= Math.abs(speed)) {
                    clearInterval(obj.timer);
                    obj.style.left = endPosition + 'px';
                }
            },30);
        }
    //obj是将要做运动的对象,有position属性的对象,endPosition对是向右运动的最远距离时的left值,speed是运动速度。

     案例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #box { 100px; height: 100px; background: #dfd; position: absolute; top: 150px; left: 56px;}
        </style>
    </head>
    <body>
    <button id="b1">200</button>
    <button id="b2">400</button>
        <div id="box"></div>
    </body>
    </html>
    <script>
        var box = document.getElementById('box');
        var b1 = document.getElementById('b1');
        var b2 = document.getElementById('b2');
        b1.onclick = function () {
            animate(box,200,10);
        }
        b2.onclick = function () {
            animate(box,400,10);
        }
        function animate(obj,endPosition,speed) {
            clearInterval(obj.timer);
            var speed = obj.offsetLeft > endPosition ? -speed : speed;
            obj.timer = setInterval(function () {
                var judgeDot = Math.abs(obj.offsetLeft - endPosition);
                obj.style.left = obj.offsetLeft + speed + 'px';//judgeDot changes with this interval.So this sentence should be in the interval;
                if(judgeDot <= Math.abs(speed)) {
                    clearInterval(obj.timer);
                    obj.style.left = endPosition + 'px';
                }
            },30);
        }
    </script>
  • 相关阅读:
    MySQL学习之——锁(行锁、表锁、页锁、乐观锁、悲观锁等)
    PhpExcel导出excel报错:net::ERR_INVALID_RESPONSE
    Java收藏
    Java项目收藏
    CentOS 6.8 安装 Erlang 及 RabbitMQ Server
    Redis 中 5 种数据结构的使用场景介绍
    Golang 实现 set 集合,变相实现 切片去重、排序 功能
    查看 Mac/Linux 某端口占用情况
    [Beego模型] 六、事务处理
    [Beego模型] 五、构造查询
  • 原文地址:https://www.cnblogs.com/darkterror/p/6213850.html
Copyright © 2011-2022 走看看