行走小动画案例扩展-阿里云开发者社区

行走小动画案例扩展

2023-09-19 23

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 行走小动画案例扩展

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
         .box{
            border: 1px black solid;
            height: 180px;
            width: 120px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .box img{
            position: absolute;
            left: 0px;
            top: 0px;
        }
        button{
            height: 30px;
            width: 30px;
            position:absolute ;
            top:200px;
            margin-top: 70px;
            left:50%;
            margin-left: -150px;
            border-radius: 50%;
            border: none;
outline: none;
            font-size: 20px;
        }
        #butn2{
            top:200px;
            margin-top: 70px;
            left:50%;
            margin-left:100px;
        }
    </style>
    <script>
        window.onload = function(){
            var oImg = document.getElementById('img01');
            var num = 0;
            var speed = 120;
            var oTimer = null;
            oTimer = setInterval(fnMove,120)
            function fnMove(){
                num -= speed
                if(num<-860){
                    num = 0
                }
                if(num>0){
                    num = -840
                }
                oImg.style.left = num + 'px'
            }
            var oButn1 = document.getElementById('butn1')
            var oButn2 = document.getElementById('butn2')
            oButn1.onclick = function(){
                speed = 120
            }
            oButn2.onclick = function(){
                speed = -120
            }
            oImg.onmouseover = function(){
                clearInterval(oTimer)
            }
            oImg.onmouseout = function(){
                oTimer = setInterval(fnMove,120)
            }
        }
    </script>
</head>
<body>
    <img src="images/walking.png" alt="行走图片">
    <button id="butn1">&lt;</button>
    <div class="box">    
        <img src="images/walking.png" alt="行走图片" id="img01">      
    </div>
    <button id="butn2">&gt;</button>
</body>
</html>

行走小动画案例扩展

热门文章

最新文章

相关课程

相关电子书