鱼C论坛

 找回密码
 立即注册
查看: 2499|回复: 16

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

[复制链接]
发表于 2017-7-28 09:51:43 | 显示全部楼层 |阅读模式

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

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

x

                               
登录/注册后可看大图


按照提示,完成代码,秀秀你的编程能力!

不许看答案,否则打屁屁





程序分析:
实现div移动,周期内移动
1.定时器
2.onload事件
3.offsetLeft
4.style.left        [/b]


源代码:
游客,如果您要查看本帖隐藏内容请回复

7月-28-2017 09-51-08.gif






如果喜欢,请订阅
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 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>

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-9-6 11:38

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 支持楼主!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-9-4 09:45:57 | 显示全部楼层
看一看offset
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-11-14 21:59:32 | 显示全部楼层
要看要看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-5-5 11:18:45 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 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);
                        };
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-25 08:47:20 | 显示全部楼层
看一下它的原理
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-6 11:58:45 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-9-25 18:27:17 | 显示全部楼层
嘿嘿嘿
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-14 15:46:47 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-4-19 22:38:03 | 显示全部楼层
做完了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-11-8 10:37:34 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-11-19 19:45:46 | 显示全部楼层
答案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-1 16:55:52 | 显示全部楼层
LIH
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-10 22:44:40 | 显示全部楼层
6666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-17 23:16:32 | 显示全部楼层
芝麻开门
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 06:03

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表