<!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. QT连接Linux mysql注意

    windows: #define MYSQLDB "QMYSQL"#define MYSQLDB_HOSTNAME "192.168.228.168"#defi ...

  2. 6.3.28微信需群主确认才可进群&发GIF动图功能内测开始了

    昨天下午有网友收到微信6.3.28新版内测邀请,不过这个内部体验目前貌似只对安卓手机开放,苹果的IOS系统还不支持,会提示“你当前使用的是非安卓设备,不建议下载安卓体验包,但你仍可邀请朋友尝鲜”.最新 ...

  3. CentOS6.3编译安装Memcached集群分布式缓存代理Magent-0.6出错汇总

    参考文章:Memcached集群/分布式/高可用 及 Magent缓存代理搭建过程 详解,搭建Magent,在编译的过程中会出现很多错误: #编译安装安装magent到 /usr/local/mage ...

  4. WebStorm设置编辑器中的字体大小

    启动webStorm之后,点击“FIle"菜单,选择其下的”Settings" 2.在左侧的菜单中选择“Editor/Colors & Fonts/Font 在右侧Sche ...

  5. jQuery中添加自定义或函数方法

    <script type="text/javascript"> (function () { $.fn.parHy = function (val) { alert(v ...

  6. linux中wc命令用法

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1．命令格式: wc [选项]文件... 2．命令功能: 统计指定文件中的字节数. ...

  7. centos 本地dns配置

    折腾了差不多两天,看了不少中文,英文文档.终于搞定,记录下心得.本文只讨论正向解析. 安装 ============= yum install bind 全局配置 ========= 由于只是做本地d ...

  8. PHP程序员如何突破成长瓶颈(php开发三到四年)

    看了这篇博文,我正好处于这个阶段,也有心要突破自己,呵呵! 作为Web开发中应用最广泛的语言之一,PHP有着大量的粉丝,那么你是一名优秀的程序员吗?在进行自我修炼的同时,你是否想过面对各种各样的问题, ...

  9. Database、User、Schema、Tables、Col、Row

    可以把Database看作是一个大仓库,仓库分了很多很多的房间,Schema就是其中的房间,一个Schema代表一个房间,Table可以看作是每个Schema中的床,Table(床)就被放入每个房间中 ...

  10. C# 毕业证书打印《四》

    数据存储,读取控件在Panel中的位置,将控件的位置保存到xml文件中. /// <summary> /// 将当前格式写入xml /// </summary> /// < ...