技法57 (◐‿◑) 用Js实现div自动移动（600px循环）

不二如是 · 发表于 2017-7-28 09:51:43

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

登录/注册后可看大图

按照提示，完成代码，秀秀你的编程能力！

不许看答案，否则打屁屁

程序分析：

实现div移动，周期内移动
1.定时器
2.onload事件
3.offsetLeft
4.style.left [/b]

源代码：

游客，如果您要查看本帖隐藏内容请回复

○面试题索引贴●

如果喜欢，请订阅

：

HTML5 - 庖丁解牛 + JavaScript - 庖丁解牛

yuyisuo · 发表于 2017-9-6 11:20:39

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <title>Javascript Test</title>
        <style>
                .container {
                        position : relative;
                        margin : 50px auto;
                        width : 600px;
                        height : 90px;
                        overflow : hidden;
                        background-color : #ccc;
                }
                .runner {
                        position : absolute;
                        top : 5px;
                        left : 0;
                        width : 80px;
                        height : 80px;
                        background-color : #00fdff;
                }
        </style>
</head>

<body>
        <div class="container">
                <div class="runner" id="runner"></div>
        </div>

        <script>
                window.onload = function () {

                        let runner = document.getElementById('runner');
                        let speed = 2;
                        let timer = null;

                        timer = setInterval(function () {

                                let left = runner.offsetLeft;

                                if (left === 520) {
                                        runner.style.left = '0px';
                                        left = 0;
                                }

                                runner.style.left = left + speed + 'px';

                        }, 30);

                };
        </script>
</body>
</html>

shinningpika · 发表于 2017-9-4 09:45:57

看一看offset

ellie · 发表于 2017-11-14 21:59:32

要看要看

向一朵朵鲜花 · 发表于 2018-5-5 11:18:45

看看

dsa159245 · 发表于 2018-7-9 06:37:53

window.onload = function(){
                                var d = document.getElementById("d1");
                                d.style.left = "200px";
                                var n = 0;
                                var dir = 5;
                                var t = setInterval(function(){
                                        
                                if(n > 600){
                                        dir = -5;
                                }
                                if(n < 0){
                                        dir = 5;
                                }
                                n+=dir;
                                        d.style.left = n + "px";
                                },20);
                        };

热爱前端的肥仔 · 发表于 2018-8-25 08:47:20

看一下它的原理

sjh13140 · 发表于 2018-9-6 11:58:45

a211827754 · 发表于 2018-9-25 18:27:17

嘿嘿嘿

wangdxf · 发表于 2019-4-14 15:46:47

hugejile1206 · 发表于 2019-4-19 22:38:03

做完了

小林白白 · 发表于 2019-11-8 10:37:34

看看

暴燥的马虫虫 · 发表于 2019-11-19 19:45:46

答案

小球鱼 · 发表于 2020-3-1 16:55:52

LIH

weiter · 发表于 2020-3-10 22:44:40

6666

stevexyh · 发表于 2020-3-17 23:16:32

芝麻开门

账号		自动登录	找回密码
密码			立即注册

[每日一练] 技法57 (◐‿◑) 用Js实现div自动移动（600px循环）

马上注册，结交更多好友，享用更多功能^_^

点评

评分