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

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

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

<!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>

提问者：转角只为遇见你 2015-06-28 14:10

个回答

慕斯0931568

2018-04-06 22:57:26

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

0
uhelper_net

2015-06-29 10:34:02

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

1