首页 > Web开发 > 详细

javascript 单行向上滚动文字

时间:2014-03-10 12:30:52      阅读:486      评论:0      收藏:0      [点我收藏+]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>间断滚动</title>
<style>
#Marquee{ height:20px; overflow:hidden;}
#Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:18px;}
</style>
</head>
<body>
<div id="Marquee">
<div style="width: 260px; height: 18px">
xxxxxxxxxx
</div>

<div style="width: 260px; height: 18px">

yyyyyyyyyy
</div>

</div>
<script>
var Mar = document.getElementById("Marquee");
var child_div=Mar.getElementsByTagName("div")
var picH = 20;//移动高度
var scrollstep=3;//移动步幅,越大越快
var scrolltime=20;//移动频度(毫秒)越大越慢
var stoptime=3000;//间断时间(毫秒)
var tmpH = 0;
Mar.innerHTML += Mar.innerHTML;
function start(){
    if(tmpH < picH){
        tmpH += scrollstep;
        if(tmpH > picH )tmpH = picH ;
        Mar.scrollTop = tmpH;
        setTimeout(start,scrolltime);
    }else{
        tmpH = 0;
        Mar.appendChild(child_div[0]);
        Mar.scrollTop = 0;
        setTimeout(start,stoptime);
    }
}
onload=function(){setTimeout(start,stoptime)};
</script></body>
</html>

javascript 单行向上滚动文字,布布扣,bubuko.com

javascript 单行向上滚动文字

原文:http://www.cnblogs.com/lin3615/p/3590768.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!