设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 技法57 (◐‿◑) 用Js实现div自动移动（ ...
返回列表 发新帖
查看: 3020|回复: 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





如果喜欢，请订阅 ：
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

yuyisuo
发表于 2017-9-6 11:20:39 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8" />
  5.         <title>Javascript Test</title>
  6.         <style>
  7.                 .container {
  8.                         position : relative;
  9.                         margin : 50px auto;
  10.                         width : 600px;
  11.                         height : 90px;
  12.                         overflow : hidden;
  13.                         background-color : #ccc;
  14.                 }
  15.                 .runner {
  16.                         position : absolute;
  17.                         top : 5px;
  18.                         left : 0;
  19.                         width : 80px;
  20.                         height : 80px;
  21.                         background-color : #00fdff;
  22.                 }
  23.         </style>
  24. </head>

  26. <body>
  27.         <div class="container">
  28.                 <div class="runner" id="runner"></div>
  29.         </div>

  31.         <script>
  32.                 window.onload = function () {

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

  38.                         timer = setInterval(function () {

  40.                                 let left = runner.offsetLeft;

  42.                                 if (left === 520) {
  43.                                         runner.style.left = '0px';
  44.                                         left = 0;
  45.                                 }

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

  49.                         }, 30);

  51.                 };
  52.         </script>
  53. </body>
  54. </html>
复制代码

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-9-6 11:38

评分

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

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

shinningpika
发表于 2017-9-4 09:45:57 | 显示全部楼层
看一看offset
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ellie
发表于 2017-11-14 21:59:32 | 显示全部楼层
要看要看
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

向一朵朵鲜花
发表于 2018-5-5 11:18:45 | 显示全部楼层
看看
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

dsa159245
发表于 2018-7-9 06:37:53 | 显示全部楼层
  1. window.onload = function(){
  2.                                 var d = document.getElementById("d1");
  3.                                 d.style.left = "200px";
  4.                                 var n = 0;
  5.                                 var dir = 5;
  6.                                 var t = setInterval(function(){
  7.                                        
  8.                                 if(n > 600){
  9.                                         dir = -5;
  10.                                 }
  11.                                 if(n < 0){
  12.                                         dir = 5;
  13.                                 }
  14.                                 n+=dir;
  15.                                         d.style.left = n + "px";
  16.                                 },20);
  17.                         };
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

热爱前端的肥仔
发表于 2018-8-25 08:47:20 | 显示全部楼层
看一下它的原理
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

sjh13140
发表于 2018-9-6 11:58:45 | 显示全部楼层
上
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

a211827754
发表于 2018-9-25 18:27:17 | 显示全部楼层
嘿嘿嘿
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

wangdxf
发表于 2019-4-14 15:46:47 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

hugejile1206
发表于 2019-4-19 22:38:03 | 显示全部楼层
做完了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小林白白
发表于 2019-11-8 10:37:34 | 显示全部楼层
看看
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

暴燥的马虫虫
发表于 2019-11-19 19:45:46 | 显示全部楼层
答案
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

小球鱼
发表于 2020-3-1 16:55:52 | 显示全部楼层
LIH
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

weiter
发表于 2020-3-10 22:44:40 | 显示全部楼层
6666
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

stevexyh
发表于 2020-3-17 23:16:32 | 显示全部楼层
芝麻开门
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2025-6-7 11:41

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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