码迷,mamicode.com
首页 > 其他好文 > 详细

marquee上下无缝滚动

时间:2017-07-11 00:53:16      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:height   one   set   上下   har   document   lin   htm   app   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>marqueen</title>
<style type="text/css">
.yk{
height:30px;
overflow:hidden;
}
#marquee p{
height:30px;
line-height:30px;
margin:0 0 0 0;
}
</style>
</head>
<body>
<div class="yk">
<div id="marquee">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
</div>
</div>
<script>
function yk(){
var marquee = document.getElementById("marquee");
var offset = 0;
var scrollheight = marquee.offsetHeight;
var firstNode = marquee.children[0].cloneNode(true);
marquee.appendChild(firstNode);//还有这里
setInterval(function(){
if(offset == scrollheight){
offset = 0;
}
marquee.style.marginTop = "-"+offset+"px";
offset += 1;
},50);
}
yk();
</script>
</body>
</html>

marquee上下无缝滚动

标签:height   one   set   上下   har   document   lin   htm   app   

原文地址:http://www.cnblogs.com/bbqq1314/p/7148300.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!