您的位置：首页 > 其它

文字信息间歇性滚动效果

2015-07-16 21:12 363 查看

学习了信息无缝滚动效果后，再来看看间歇性滚动的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>信息间歇性循环滚动效果</title>
<style type="text/css">
*{margin:0;padding:0;}
a{color:#000;text-decoration:none;}
.wrap{width:400px;margin:60px auto;border:6px solid #ccc;border-radius:6px;}
#title{width:100%;background:red;font-size:16px;text-align:center;height:40px;line-height:40px;}
#box{height:216px;overflow:hidden;}
ul{list-style: none;}
ul li{display:block;width:360px;height:30px;line-height: 30px;overflow:hidden;padding-left:20px;padding-right:20px;border-bottom:1px dotted #ccc;}
a:hover, a:active{color:red;}
</style>
</head>
<body>
<div class="wrap">
<div id="title">图书排行</div>
<div id="box">
<ul>
<li><a href="#">1 解忧杂货店</a></li>
<li><a href="#">2 我的第一本专注力训练书（专注的孩子更聪明）</a></li>
<li><a href="#">3 宝宝第一套好性格养成书：皮特猫</a></li>
<li><a href="#">4 自控力（斯坦福大学最受欢迎的心理学课程）</a></li>
<li><a href="#">5 从0到1：开启商业与未来的秘密</a></li>
<li><a href="#">6 硬派健身</a></li>
<li><a href="#">7 追风筝的人</a></li>
<li><a href="#">8 棚车少年（套装共8册）（中英双语）</a></li>
<li><a href="#">9 自我保护意识培养（第1辑）：我不跟你走+别想欺负我（套装共两册）</a></li>
<li><a href="#">10 岛上书店</a></li>
</ul>
</div>
</div>

<script type="text/javascript">
var area = document.getElementById('box');
var liH = 31;//单行滚动的高度(li高度+border-bottom)
var speed = 50;//滚动的速度
var delay = 2000;
var timer;

area.scrollTop = 0;
area.innerHTML+=area.innerHTML;//复制出一个相同的ul

function startScroll(){
timer = setInterval('scrollUp()',speed);
area.scrollTop++;
}

function scrollUp(){
//area.scrollTop++;
if(area.scrollTop % liH == 0){
clearInterval(timer);
setTimeout('startScroll()',delay);
}
else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop = 0;
}
}
}
setTimeout('startScroll()',delay);//初始化
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航