码迷,mamicode.com
首页 > 其他好文 > 详细

无限滚动 --demo

时间:2016-11-14 07:39:33      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:get   content   height   lin   charset   margin   圆角   cti   下拉   

<!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="#">1.学会html5 </a> </li>
<li><a href="#">2.tab页面切换效果</a> </li>
<li><a href="#">3.圆角水晶按钮制作</a> </li>
<li><a href="#">4.HTML+CSS</a> </li>
<li><a href="#">5.分页页码</a> </li>
<li><a href="#">6.导航条菜单的制作</a> </li>
<li><a href="#">7.信息列表制作</a> </li>
<li><a href="#">8.下拉菜单制作</a></li>
<li><a href="#">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

标签:get   content   height   lin   charset   margin   圆角   cti   下拉   

原文地址:http://www.cnblogs.com/MengChengKong/p/6060494.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!