js实现简单的动画（游动的鱼）

最新推荐文章于 2025-03-17 11:11:24 发布

sweetllh

最新推荐文章于 2025-03-17 11:11:24 发布

阅读量5.3k

点赞数 3

分类专栏： javascript 运动

本文链接：https://blog.csdn.net/sweetllh/article/details/70250287

版权

javascript 同时被 2 个专栏收录

73 篇文章

订阅专栏

运动

7 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            img{
                width: 64px;
                height: 128px;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <img id="fish" src="img/3/0.png" style="top: 500px; left: 400px;" /> 
    </body>
    <script>
        var images = [];
        for(var i=0;i<=11;i++){
            images[i] = 'img/3/' + i + '.png';
        }
        //console.log(images);
        var fish = document.getElementById('fish');
        var index = 0;
        setInterval(function(){
            index++;
            // 如果图片下标的位置大于图片数组的长度，重置为0
            if (index >= images.length){
                index = 0;
            }
            fish.src = images[index];
            fish.style.top = parseInt(fish.style.top) + -1 + 'px';
        }, 1000/10);
    </script>
</html>