js实现列表无间隙循环滚动
来源:互联网 发布:投诉淘宝的电话是多少 编辑:程序博客网 时间:2024/06/04 18:21
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>无间隙循环滚动</title><style type="text/css">body {font-size: 12px;line-height: 24px;text-algin: center; /* 页面内容居中 */}* {margin: 0px;padding: 0px; /* 去掉所有标签的marign和padding的值 */}ul {list-style: none; /* 去掉ul标签默认的点样式 */}a {color: #333;text-decoration: none; /* 超链接样式 */}a:hover {color: #ff0000;}#container {width: 399px;border: 5px solid #ababab;border-radius: 15px;box-shadow: 2px 2px 10px #ababab;margin: 50px auto 0;text-align: left; /* 让新闻内容靠左 */}#mocc {height: 144px;width: 335px;margin-left: 25px;margin-top: 10px;overflow: hidden; /* 这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */}#container ul li {height: 24px;}#container ul li a {width: 180px;float: left;overflow: hidden;text-indent: 15px;height: 24px;}#container ul li span {float: right;color: #999;}</style></head><body><div id="container"><div id="mocc"><ul id="con1"><li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li><li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li><li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li><li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li><li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li><li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li><li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li><li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li><li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li></ul><ul id="con2"></ul></div></div><script>var area = document.getElementById('mocc');var con1 = document.getElementById('con1');var con2 = document.getElementById('con2');var speed = 50;var myscroll;con2.innerHTML = con1.innerHTML;//复制节点,用于循环//循环判断是否循环function scrollUp(){if(area.scrollTop >= con1.offsetHeight){area.scrollTop = 0;//滚动的高度等于ul的高度,将area变成0}else{area.scrollTop++;}}myscroll = setInterval('scrollUp()',speed);area.onmouseover = function (){clearInterval(myscroll);}area.onmouseout = function(){myscroll = setInterval('scrollUp()',speed);}</script></body></html>
0 0
- js实现列表无间隙循环滚动
- 无间隙循环滚动
- js 无间隙滚动函数
- 图片向左无间隙循环滚动
- js 无间隙向上滚动代码
- JS实现图片无缝滚动的完美解决 无间隙滚动
- 图片无间隙滚动
- 公告栏无间隙滚动
- 纯JS无间隙文字向上滚动代码
- js无间隙轮播图
- Javascript无间隙滚动图片
- 文字滚动无间隙代码
- js实现列表滚动
- jquery无间隙滚动、无缝滚动
- jquery滚动效果-无间隙向上滚动
- jquery滚动效果-无间隙向上滚动
- js无缝间隙向上滚动
- Js实现无缝隙滚动
- 需要帮助!!!
- GNU Radio 模块扩展说明
- 【自考】数据结构之二叉树遍历
- CSS标签大全
- 打印shell脚本执行的命令到终端
- js实现列表无间隙循环滚动
- NYOJ 题目129树的判定(并查集)
- 【LeetCode】Algorithms 题集(四)
- 黑马程序员——面向对象(二)
- Jersey+Spring+Hibernate整合
- mysql-5.6.15-win32.zip 启动方式
- sles11之dns服务器配置
- 协议演变
- 常用颜色RGB值