Maison > interface Web > js tutoriel > le corps du texte

l'animation js réalise un mouvement uniforme dans une direction dans un délai spécifié

巴扎黑
Libérer: 2017-07-20 14:16:18
original
1064 Les gens l'ont consulté

Le code spécifique est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            position:absolute;
            top:0;
            left:0;
            padding:0;
            width:100px;
            height:100px;
            background:lightblue;

        }</style>
</head>
<body>
    <div id=&#39;box&#39;></div>
    <script>//思想1:var oBox = document.getElementById('box');//实现一个匀速运动:在指定时间内完成动画:计算出总距离/总时间,然后求出对应的步长(每10ms走一步的话需要走多远)var maxLeft = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;var duration = 2000;var step = (maxLeft/duration)*10;var timer = window.setInterval(function(){var curLeft = utils.css(oBox,"left");
            curLeft+=step;if(curLeft>=maxLeft){
                window.clearInterval(timer);return;
            }
            utils.css(oBox,"left",curLeft);
        },10)//思想2:function Linear(t,b,c,d){//相对应的是time begin change durationreturn c*t/d+b        }var oBox = document.getElementById('box');var target = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;var begin = utils.css(oBox,'left'),change = target-begin;var duration = 2000,time = null;var timer = window.setInterval(function(){
            time+=10;if(time>=duration){
                utils.css(oBox,"left",target);
                window.clearInterval(timer);return;
            }var curPos = Linear(time,begin,change,duration);
            utils.css(oBox,"left",curPos)

        },10)</script>
</body>
</html>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal