JS实例——间歇循环滚动（纵向）

最新推荐文章于 2023-09-22 11:22:39 发布

DC豆

最新推荐文章于 2023-09-22 11:22:39 发布

阅读量1.5k

点赞数

文章标签：前端

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<meta name="keywords" content="关键字1,关键字2" />    
<meta name="Description" content="描述信息" />
<title>间歇循环滚动</title>
<!--CSS/JS-->
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;display:block;}
#scrollBox{height:144px;width:300px;margin:100px auto;background:#f09;overflow:hidden;}
#scrollBox #con1,#con2{width:280px;float:left;}
#scrollBox li{line-height:24px;text-align:center;}

</style>


</head>
<body>
<!--div-->
<div id="scrollBox">
<ul id="con1">
<li>我是测试内容1！！<li>
<li>我是测试内容2！！<li>
<li>我是测试内容3！！<li>
<li>我是测试内容4！！<li>
<li>我是测试内容5！！<li>
<li>我是测试内容6！！<li>
<li>我是测试内容7！！<li>
<li>我是测试内容8！！<li>
<li>我是测试内容9！！<li>
</ul>

</div>
<script type="text/javascript">    
var area =document.getElementById('scrollBox');    
var lHeight = 24;
var time = 50;
area.innerHTML+=area.innerHTML;
area.scrollTop = 0;
var timer;
function scrollMove(){
area.scrollTop++;
timer = setInterval("scrollUp()",time);
}

function scrollUp(){
if(area.scrollTop % lHeight==0){//滚动一行后，延时2秒
clearInterval(timer);
setTimeout("scrollMove()",2000);
}else{
area.scrollTop++;
if(area.scrollTop>=area.scrollHeight/2){    //判断滚动高度,当滚动高度大于area本身的高度时，使其回到原点重新滚动    
area.scrollTop = 0;    
}
}

}    

setTimeout("scrollMove()",2000);//延迟2秒后执行scrollMove


</script>
</body>

</html>

文章摘自（云中志）

DC豆

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS实例——间歇循环滚动（纵向）

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="keywords" content="关键字
复制链接

扫一扫