js实现小猴子走路简单动画_js脚本动物走路-优快云博客

本文介绍了一个简单的网页动画实例，通过HTML、CSS和JavaScript实现了一个猴子跑动的动画效果，并配合背景图片的滚动展示，实现了基本的网页互动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100%;
            height: 70px;
            background: url("images/block_brick.png");
            position: absolute;
            top: 300px;
        }
        #box2{
            width: 100%;
            height: 70px;
            background: url("images/block_brick.png");
            position: absolute;
            top: 300px;
        }
        #box3{
            width: 100%;
            height: 70px;
            background: url("images/block_brick.png");
            position: absolute;
            top: 300px;
        }
        img{
            margin-top: 145px;
            margin-left: 600px;
        }
    </style>
</head>
<body>
<img src="images/monkey_run_1" alt="">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
<script src="js/js.js"></script>
<script>
    var oBox1=document.getElementById("box1");
    var oBox2=document.getElementById("box2");
    var oBox3=document.getElementById("box3");
    var aImg=document.getElementsByTagName("img")[0];
    var bWidth=utils.win("clientWidth");
    var i=1;
    utils.css(oBox1,{width:bWidth});
    utils.css(oBox2,{width:bWidth});
    utils.css(oBox3,{width:bWidth});
    utils.css(oBox1,{left:0});
    utils.css(oBox2,{left:-bWidth});
    utils.css(oBox3,{left:-2*bWidth});
    setInterval(function(){
        oBox3.style.left=oBox3.offsetLeft+8+"px";
        i++;
        if(i==9){
            i=1;
        }
        aImg.src="images/monkey_run_"+i+".png";
        if(oBox3.offsetLeft==bWidth){
            oBox3.style.left=-2*bWidth+"px";
        }
        oBox2.style.left=oBox2.offsetLeft+8+"px";
        if(oBox2.offsetLeft==bWidth){
            oBox2.style.left=-2*bWidth+"px";
        }
        oBox1.style.left=oBox1.offsetLeft+8+"px";
        if(oBox1.offsetLeft==bWidth){
            oBox1.style.left=-2*bWidth+"px";
        }
    },30)
</script>
</html>