文字持续滚动

来源：互联网发布：淘宝店铺托管靠谱吗编辑：程序博客网时间：2024/04/28 08:28

原理：设置三个div，第一个div内包含其余两个div，第一个div有宽高，第二个div有内容，将第一个div的宽高通过样式给其余两个加，通过innerHTML给第三个div加内容，设置一个定时器，当内容向上滚动的距离等于高时，重新置零，否则++。

属性：offsetHeight,scrollTop

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>书讯快递</title>
<style type="text/css">
body,ul,li{margin:0px;padding:0px;}
ul,li{list-style: none;}
#div1
{
width:380px;
height:220px;
border:1px solid red;
margin:0px auto;
padding:0px 10px;
overflow: hidden;
}
#div1 li{padding:1px 0px;}
</style>
<script type="text/javascript">

window.onload=function()
{
//得到三个div的id
var dome1=document.getElementById("div1");
var dome2=document.getElementById("div2");
var dome3=document.getElementById("div3");
//三个div的高度一样
div2.style.height=dome1.offsetHeight+"px";
div3.style.height=div1.offsetHeight+"px";
//div2.style.backgroundColor="red";
//div3.style.backgroundColor="green";
//将div2的内容复制到div3
div3.innerHTML=div2.innerHTML;
window.setInterval("start1()",10);
}

function start1()
{
var dome1=document.getElementById("div1");
if(div1.scrollTop==div1.offsetHeight)
{
dome1.scrollTop=0;
}else
{
dome1.scrollTop++;
}
}

</script>
</head>
<body>
<div id="div1">
<div id="div2">
<ul>
<li>.分享送积分286 收藏商品拉普拉斯的魔女</li>
<li>.解忧杂货店</li>
<li>.好好说话：新鲜有趣的话</li>
<li>.别把这世界让给你鄙视的人</li>
<li>.圣女的救济</li>
<li>.邓文迪：女人明白要趁早</li>
<li>.好好学习：个人知识管理</li>
<li>.三生三世十里桃花</li>
<li>.愿你的青春不负梦想</li>

</ul>
</div>
<div id="div3"></div>
</div>
</body>
</html>

0 0