首页 > 代码库 > 无限滚动 --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