为什么这样可以实现字幕滚动效果呢-慕课网

首页课程实战体系课手记专栏慕课教程

为什么这样可以实现字幕滚动效果呢

来源：9-12 插入节点appendChild()

转角只为遇见你

2015-06-28 14:10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#d{position:absolute;background-color:#eee;left:100px;top:100px;}

#d div{font-size:25px;magin:5px;}

</style>

<script type="text/javascript">

function body_onload(){

var handle=setInterval(myfun,500);

var d=document.getElementById("d");

function myfun(){

d.appendChild(d.firstChild);

}

}

</script>

</head>

<body onload="body_onload()">

<div id="d">

<div>我是字幕1</div>

<div>我是字幕2</div>

<div>我是字幕3</div>

<div>我是字幕4</div>

</div>

</body>

</html>

写回答关注

2回答

慕斯0931568

2018-04-06 22:57:26

话说怎么让他们横着流动？

0 0
uhelper_net

2015-06-29 10:34:02

打一个简单的比喻,把这四个字幕div当作钓鱼的浮袍(把第一个取掉之后,后面的会浮上来).d.appendChild(d.firstChild)相当于把第一个元素,插到队尾,队列第二个元素迅速成为第一个元素,如此循环.不过此代码还不够完善,需要过滤掉非element子节点.对dom操作或dom节点不熟悉,建议网上找找<<Javascript权威指南(6th)>>或<<JavaScript高级程序设计(2-3th)>>看一下.

2 1

jikaiy... 回复转角只为遇见...

了解了

2016-03-16 22:04:45

共 2 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468061 学习 · 21891 问题

相似问题

这样的代码为什么不可用？不能实现效果

回答 1

这个效果可以用CSS实现吗？

回答 1

为什么效果不能实现

回答 2

为什么这样的代码不能实现数字递减呢

回答 5

input最后那加个斜杠有什么用呢去掉也可以实现效果

回答 5

打开慕课网App查看更多内容