<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>循环滚动信息栏</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#express li{
height:25px;
border-bottom:dashed 1px #999;
line-height:20px;
font-size:12px;
list-style:none;
width:300px;
}
#dome{
height:305px;
overflow:hidden;
margin-top:0px;
}
#book_class{
width:400px;
height:310px;
border:3px solid #999;
margin-left:auto;
margin-right:auto;
margin-top:70px;
border-radius:5px 5px 5px 5px;
box-shadow:0px 0px 10px 10px #CECED1;
}
#express{
margin-left:-30px;
margin-right:10px;
margin-bottom:0px;
margin-top:0px;
}
#book_class div div ul li a{
text-decoration:none;
color:#333333;
}
#book_class div div ul li a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<div id="book_class">
<div id="dome">
<div id="dome1">
<ul id="express">
<li><a href="#">·2010考研英语大纲到货75折...</a>|<a>123</a>|<a>456</a></li>
<li><a href="#">·权威定本四大名著（人民文...</a>|<a>123</a>|<a>456</a></li>
<li><a href="#">·口述历史权威唐德刚先生国...</a>|<a>123</a>|<a>456</a></li>
<li><a href="#">·袁伟民与体坛风云：实话实...</a>|<a>123</a>|<a>456</a></li>
<li><a href="#">·我们台湾这些年：轰动两岸...</a>|<a>123</a>|<a>456</a></li>
<li><a href="#">·畅销教辅推荐：精品套书50...</a>|<a>123</a>|<a>456</a></li>
<li><a href="#">·2010版法律硕士联考大纲75...</a>|<a>123</a>|<a>456</a></li>
<li><a href="#">·计算机新书畅销书75折抢购</a>|<a>123</a>|<a>456</a></li>
<li><a href="#">·2009年孩子最喜欢的书</a>|<a>123</a>|<a>456</a></li>
<li><a href="#">·弗洛伊德作品精选集59折</a>|<a>123</a>|<a>456</a></li>
</ul>
<!---------多复制<li>标签就行了------这里就不多写了---------->
</div>
<div id="dome2"></div>
</div>
</div>
<!----------防止html没有加载完，把javascript代码写在下面---------->
<script type="text/javascript">
var dome = document.getElementById("dome");
var dome1 = document.getElementById("dome1");
var dome2 = document.getElementById("dome2");
var speed = 50;//设置向上轮动的速度
dome2.innerHTML = dome1.innerHTML;//复制节点
var tempHeight = 0;
function moveTop() {
if (dome1.offsetHeight - tempHeight <= 0) {
dome.scrollTop = 0;
tempHeight = 0;
} else {
dome.scrollTop++;
tempHeight++;
console.log(dome.scrollTop);
}
}
//var myFunction = setInterval("moveTop()", speed);
//dome.onmouseover = function () {
// clearInterval(myFunction);
//}
//dome.onmouseout = function () {
// myFunction = setInterval(moveTop, speed);
//}
</script>
</body>
</html>

ul 仿 table 循环滚动的更多相关文章

  1. Jquery制作--循环滚动列表

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...

  2. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  3. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

  4. JS实例——间歇循环滚动

    间歇滚动:滚动一行后,延迟2秒后继续滚动 具体实现代码如下: <!doctype html> <html lang="en"> <head> & ...

  5. NGUI实现的一套不同大小 Item 的循环滚动代码

    测试: 数据 & Item  的 Ctrl : using UnityEngine; public class ScrollViewItemData { public int index; p ...

  6. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  7. 【js与jquery】jquery循环滚动新闻

    2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...

  8. 【转】Android循环滚动广告条的完美实现，封装方便，平滑过渡，从网络加载图片，点击广告进入对应网址

    Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址 关注finddreams,一起分享,一起进步: http://blog.csdn.net/finddr ...

  9. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. jQuery 学习之路（3）：DOM操作

    一.在元素内部插入 .append(content[,content]) 在指定元素的内部末尾插入字符串,或在指定元素的内部末尾移入指定元素,如 $(".container").a ...

  2. Object&&String学习

    Object类 列表项 String类 常用方法 构造方法 public String() public String(byte[] bytes) public String(byte[]bytes, ...

  3. webapp中fixed问题解决方案

    主要问题: 1,头部输入框固定后,只要再滑动内容的话,输入框会随着滑动内容而滑动. 2,在低端机:2.3以下的安卓机,你会发现怎么解决都不行的,系统浏览器是不会支持的,头部底部固定的话会滑动内容而滑动 ...

  4. [AngularJS] 入门

    什么是AngularJS AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足, 其通过使用指令(directives)结构来扩展HTML词汇 ...

  5. poj.1703.Find them, Catch them(并查集）

    Find them, Catch them Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I6 ...

  6. Mac 下用IDEA时maven，ant打包 （mr 入库hbase）

    现在非常喜欢IDEA,之前在mac 上用的eclipse 经常出现无缘无故的错误.所以转为IDEA.  不过新工具需要学习成本,手头上的项目就遇到了很多问题,现列举如下: 背景描述 在hadoop 开 ...

  7. C++Socket编程总结 [转]

    使用socket写代码主要是要看自己的需求是什么. 如果通信时,内容很重要就要使TCP方式. 如果用户数太多,可能就要使用UDP方式了. 在TCP模式下,最简单的方式就是这样的,使阻塞方式: 服务端: ...

  8. CSU 1120 病毒（DP）

    题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1120 解题报告:dp,用一个串去更新另一个串,递推方程是: if(b[i] > a ...

  9. const 和宏的区别

    参考:http://blog.sina.com.cn/s/blog_79b01f6601018xdg.html (1) 编译器处理方式不同 define宏是在预处理阶段展开. const常量是编译运行 ...

  10. qt-5.6.0 移植之qt文件系统的建立

    经过差不多两个星期的奋斗,终于在板子里面跑起来了qt 程序,虽然现在还没有把触摸屏驱动加上去,但是我相信已经不远了!!!!! 在前两篇的随笔里面 , 已经编译好了最纯净的文件系统以及交叉编译完成了qt ...