<!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. 文件操作 fopen() fclose()

    #define _CRT_SECURE_NO_DEPRECATE /*取消scanf,printf不安全之类的错误提示*/ /* fopen example */ #include <stdio ...

  2. 金山毒霸和Chrome浏览器植入脚本导致网页报错

    1 (function(win, undefined) { var SELECTORS = transformSelector; function insertTemplate(callback) { ...

  3. SGU 495. Kids and Prizes

    水概率....SGU里难得的水题.... 495. Kids and Prizes Time limit per test: 0.5 second(s)Memory limit: 262144 kil ...

  4. linux 模块加载

    错误: rmmod 时提示 rmmod: chdir(xxx): No such file or directory 解决方法: http://blog.csdn.net/luckywang1103/ ...

  5. 15天学会jquery

    第二章 15 Days of jQuery 比window.onload 更快一些的载入 window.onload()是传统javascript 里一个能吃苦耐劳的家伙.它长久以来一直 被程序员们作 ...

  6. 关于NGUI与原生2D混用相互遮盖的问题心得

    http://www.fzgh.org.cn/zuixindianying/144224.html Native2D自己可以使用Sort Layer来排序,每层又有不同的Order In Layer, ...

  7. Visual Studio error C2001:常量中有换行符（解决办法）

    在Visual Studio自动生成的项目中,碰见了一件关于文件编码的问题,集中在类似于以下的语句上: DASLog (DASProtWarn, L"(%s)消息超时,进入慢循环召唤模式.& ...

  8. Java代码注释XXX TODO FIXME 的意义

    特殊注释: 1 TODO 表示需要实现,但目前还未实现的功能 2 XXX 勉强可以工作,但是性能差等原因 3 FIXME 代码是错误的,不能工作,需要修复 TODO: + 说明:如果代码中有该标识,说 ...

  9. tableView 选中cell时，获取到当前cell

    // >> 找到当前选中的cell,设置选中时的cell背景色 SideTableViewCell * cell = (SideTableViewCell *)[tableView cel ...

  10. gulp学习笔记1-定义

    1.gulp是前端开发过程中对代码进行构建的自动化工具,可以通过它提供的各种插件实现如:预编译(sass&less).压缩.合并.图片精灵等前端的重复操作 2.基于nodeJS,以js编写插件 ...