<!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的更多相关文章

  1. iOS开发：一个无限滚动自动播放图片的Demo（Swift语言编码）

    很久以前就想写这么一个无限滚动的Demo了,最近学习了下Swift,手中没有可以用来练手的Demo,所以才将它实现了. Github地址(由于使用了UIView+AutoLayout第三方进行布局,所 ...

  2. iOScollectionView广告无限滚动(Swift实现)

    今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: ...

  3. infinite-scroll插件无限滚动加载数据的使用

    网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...

  4. 【转】超酷的 mip-infinitescroll 无限滚动（无限下拉）

    写在前面 无限滚动技术(又叫做无限下拉技术)被广泛应用于新闻类,图片预览类网站.对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长.技术上原理也很简单,在页面加载时加载一 ...

  5. （转）15个非常棒的jQuery无限滚动插件【瀑布流效果】

    原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...

  6. jquery实现无限滚动瀑布流实现原理

    现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流. 虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinit ...

  7. 【无限滚动加载数据】—infinite-scroll插件的使用

    网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...

  8. 15个非常棒的jQuery无限滚动插件【瀑布流效果】

    现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...

  9. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

随机推荐

  1. 瞬间从IT屌丝变大神——命名规则

    为了避免命名冲突,命名规则如下: 公共组件因为高度重用,,命名从简,不要加前缀. 各栏目的相应代码,需加前缀,前缀为工程师姓名拼音的首字母,例如:海子前缀为“hz_”,分隔符为下划线"_&q ...

  2. Things App Engine Doesn't Do...Yet

    当人们第一次使用App Engine的时候,他们会问一些App Engine不会做的事情.其中的一些事情Google在不久的将来会实现的,还有一些违背了App Engine设计的本质,将不可能增加(到 ...

  3. 【转】详解iOS应用程序内使用IAP/StoreKit付费、沙盒（SandBox）测试、创建测试账号流程

    http://blog.csdn.net/xiaominghimi/article/details/6937097 //——2012-12-11日更新   获取"产品付费数量等于0这个问题& ...

  4. JSF 2 listbox example

    In JSF, <h:selectOneListbox /> tag is used to render a single select listbox – HTML select ele ...

  5. Mysql常见报错解决方法

    一:登录报错 ERROR 1045 (28000): Access denied for user 'mysql'@'localhost' (using password: NO) mysql日志文件 ...

  6. Linux df 命令用法示例

    介绍: Linux中df命令可以用来显示目前在Linux系统上的文件系统的磁盘使用情况统计.这些工具可以方便地知道哪些文件系统消耗多少内存.此外,如果被拾起,并且提供一个特定的文件名作为df命令的参数 ...

  7. iOS 通知中心 NSNotificationCenter

    iOS开发中,每个app都有一个通知中心,通知中心可以发送和接收通知. 在使用通知中心 NSNotificationCenter之前,先了解一下通知 NSNotification. NSNotific ...

  8. Thinkphp框架 -- 短信接口验证码

    我用的是一款名叫 短信宝 的应用,新注册的用户可以免费3条测试短信,发现一个BUG,同个手机可以无限注册,自己玩玩还是可以的. 里面的短信接口代码什么信息都没有,感觉看得不是很明白,自己测试了一遍,可 ...

  9. Swift学习笔记五

    基础运算符 Swift的大部分运算符和C及OC相同,也分一元二元多元的,这里只记录一些Swift特有的性质或写法. 赋值运算符( = ) 在等号右边是一个有多个值的元组时,它的成员值可以分解并同时分别 ...

  10. BZOJ 1607: [Usaco2008 Dec]Patting Heads 轻拍牛头 筛法

    1607: [Usaco2008 Dec]Patting Heads 轻拍牛头 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lyds ...