首页 > 代码库 > 无限滚动 --demo
无限滚动 --demo
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无限滚动-demo</title>
<style>
body {
font-size: 12px;
line-height: 24px;
text-algin: center;
margin: 50px;
}
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
a img {
border: none;
}
a {
color: #333;
text-decoration: none;
a:hover {
color: #ff0000;
}
/* 中间样式 */
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
border: 1px solid red;
}
</style>
</head>
<body>
<div id="moocBox">
<ul id="con1">
<li><a href="http://www.mamicode.com/#">1.学会html5 </a> </li>
<li><a href="http://www.mamicode.com/#">2.tab页面切换效果</a> </li>
<li><a href="http://www.mamicode.com/#">3.圆角水晶按钮制作</a> </li>
<li><a href="http://www.mamicode.com/#">4.HTML+CSS</a> </li>
<li><a href="http://www.mamicode.com/#">5.分页页码</a> </li>
<li><a href="http://www.mamicode.com/#">6.导航条菜单的制作</a> </li>
<li><a href="http://www.mamicode.com/#">7.信息列表制作</a> </li>
<li><a href="http://www.mamicode.com/#">8.下拉菜单制作</a></li>
<li><a href="http://www.mamicode.com/#">9.如何实现</a> </li>
</ul>
<ul id="con2">
</ul>
</div>
<script>
var area=document.getElementById("moocBox");
var croll01=document.getElementById("con1");
var croll02=document.getElementById("con2");
croll02.innerHTML =croll01.innerHTML;
area.scrollTop = 0;
function scrollup(){
if(area.scrollTop >=croll01.scrollHeight){
area.scrollTop = 0;
}else{
area.scrollTop++;
}
}
var stop = setInterval("scrollup()",30);
area.onmouseover =function(){
clearInterval(stop);
}
area.onmouseout =function(){
stop = setInterval("scrollup()",30);
}
无限滚动 --demo