cari

Rumah  >  Artikel  >  hujung hadapan web  >  用js指定步长实现单方向匀速运动

用js指定步长实现单方向匀速运动

巴扎黑
巴扎黑asal
2017-07-20 13:34:561973semak imbas

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id=&#39;box&#39;></div>
    <script>var oBox = document.getElementById("box");var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;var step = 5;var timer = window.setInterval(function(){var curLeft = utils.css(oBox,"left");if(curLeft+step >= maxLeft){//边界判断utils.css(oBox,"left",maxLeft);
                window.clearInterval(timer);return;
            }
            curLeft+=step;
            utils.css(oBox,"left",curLeft);
        },10)//问题:当总距离/我们设定的步长 = 不是一个整数。少走一步还差点距离到目标位置，多走一步会超出目标的位置//解决:在进行边界判断的时候加上步长来进行处理</script>
</body>
</html>

 

Atas ialah kandungan terperinci 用js指定步长实现单方向匀速运动. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：代码书写风格同一的工具——editorConfigArtikel seterusnya：看大神如何用javascript编程解决黑化的牛牛问题

Artikel berkaitan

Lihat lagi