无限滚动 --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="#">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的更多相关文章
- iOS开发:一个无限滚动自动播放图片的Demo(Swift语言编码)
很久以前就想写这么一个无限滚动的Demo了,最近学习了下Swift,手中没有可以用来练手的Demo,所以才将它实现了. Github地址(由于使用了UIView+AutoLayout第三方进行布局,所 ...
- iOScollectionView广告无限滚动(Swift实现)
今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: ...
- infinite-scroll插件无限滚动加载数据的使用
网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...
- 【转】超酷的 mip-infinitescroll 无限滚动(无限下拉)
写在前面 无限滚动技术(又叫做无限下拉技术)被广泛应用于新闻类,图片预览类网站.对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长.技术上原理也很简单,在页面加载时加载一 ...
- (转)15个非常棒的jQuery无限滚动插件【瀑布流效果】
原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...
- jquery实现无限滚动瀑布流实现原理
现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流. 虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinit ...
- 【无限滚动加载数据】—infinite-scroll插件的使用
网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...
- 15个非常棒的jQuery无限滚动插件【瀑布流效果】
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
随机推荐
- 防asp木马运行
首 页 > 技术支持 防asp木马运行 目前比较流行的ASP木马主要通过三种技术来进行对服务器的相关操作. 一.使用FileSystemObject组件 FileSystemObject可以对文 ...
- homework-04
1.准备工作 本次结对编程我们对项目本身就行了分工,既然是测试来驱动开发,那么我们就把本次工作分成了测试与生成两个部分,小明同学负责生成测试数据,而我写测试程序检测测试结果是否正确,相对来说还是小明同 ...
- 让UITableViewCell的分隔线宽度等于屏幕的宽度
3种方法: 1.自定义cell: 1).取消系统的分隔线 2).添加一个高度为1,宽度为屏幕宽度的UIView作为cell的子视图,通过设置frame或者约束使这个UIView始终在cell的底部 3 ...
- ecstore b2b2c 商城页面伪静态代码 及相关注意事项
一下代码需要添加到 nginx.conf配置文件的server块,阿里云虚拟机一般在conf文件夹下建立vhost文件夹,把server块放进去,然后 在nginx.conf使用include 包含进 ...
- [iOS基础控件 - 6.11.5] 沙盒 & 数据存储
A.沙盒 每个APP都有一个沙盒,是独立存在的 1.Xcode5和Xcode6的模拟器文件目录 a.模拟器路径改版 (1)Xcode5中模拟器路径为:/Users/用户名/Library/Appl ...
- VPN Gate Client v4.11-免費、無限流量VPN翻牆(跳板)軟體(使用教學)
VPN Gate Client安裝教學 ▼把下載的檔案壓縮後,開啟安裝檔案. ▼接下來就是一般安裝步驟,下一步>下一步 ▼同意>下一步>下一步 ▼安裝目錄可以用預設的也可以自 ...
- iOS异常捕获
文章目录 一. 系统Crash 二. 处理signal 下面是一些信号说明 关键点注意 三. 实战 四. Crash Callstack分析 – 进⼀一步分析 五. demo地址 六. 参考文献 前言 ...
- poj3041
Asteroids Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12162 Accepted: 6620 Descri ...
- CSS构造表格
表格的基础构造 边距和边线应用 隐藏和删除应用 简单表格 table { width:auto; border-collapse:collapse;(把单元格空隙合并起来) m ...
- java线程中的wait和notify以及notifyall
一.区别与联系 1.1.wait(),notify()和notifyAll()都是java.lang.Object的方法,而确实sleep方法是Thread类中的方法,这是为什么呢? 因为wait和 ...