<!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. gflags

    一.安装配置 下载地址: https://code.google.com/p/gflags/downloads/list 解压安装: tar zxvf gflags-2.0.tar.gz && ...

  2. c++异常总结

    堆栈辗转开解(stack-unwinding):如果一个函数中出现异常,在当前函数内即通过 try..catch 捕捉(且捕捉到)的话,可以继续往下执行:如果不捕捉(或未捕捉到)就会抛出(与通过 th ...

  3. lua 学习

    尽管所有的脚本语言在特定领域都有自己的一席之地,但在游戏开发的世界里,Python 和 Lua 是非常适合的,因为它们可以直接调用C++的功能. lua最让人惊喜的地方应该是它的执行速度,目前没有任何 ...

  4. 从svn检出项目---------不是web项目

    javaweb项目从svn检出变成java项目 javaweb项目从svn检出后变成java项目,解决办法是: 1.项目右键–properties–Project Facets,勾选上Dynamic ...

  5. 大熊君大话NodeJS之------FS文件模块

    一,开篇分析 文件系统模块是一个简单包装的标准 POSIX 文件 I/O 操作方法集.可以通过调用 require("fs") 来获取该模块.文件系统模块中的所有方法均有异步和同步 ...

  6. 【AngularJS】—— 7 模块化

    AngularJS有几大特性,比如: 1 MVC 2 模块化 3 指令系统 4 双向数据绑定 那么本篇就来看看AngularJS的模块化. 首先先说一下为什么要实现模块化: 1 增加了模块的可重用性 ...

  7. 【C语言入门教程】2.4 浮点型数据

    浮点型数据又称实型数据,是一个以十进制表示的符号实数.符号实数的值包括整数部分.尾数部分和指数部分. 2.4.1 浮点型常量 一些较大的数值,或者有小数位.指数位的数值都需要用浮点型常量表示.浮点型常 ...

  8. Codeforces Round #336 Hamming Distance Sum

    题目: http://codeforces.com/contest/608/problem/B 字符串a和字符串b进行比较,以题目中的第一个样例为例,我刚开始的想法是拿01与00.01.11.11从左 ...

  9. Java(Android)线程池

      1.new Thread的弊端执行一个异步任务你还只是如下new Thread吗? new Thread(new Runnable() { @Override public void run()  ...

  10. Java多线程基础知识（四）

    一. Condition 接口 1. Condition接口也提供了类似Object的监视器方法,与Lock配合可以实现等待/通知模式. 但是这两者在使用方式以及功能特性上还是有差别的. 2. 支持多 ...