<!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. 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)

    11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...

  2. [译]管理IIS日志的存储

    原文:http://www.iis.net/learn/manage/provisioning-and-managing-iis/managing-iis-log-file-storage Overv ...

  3. Java并发包源码学习之AQS框架（二）CLH lock queue和自旋锁

    上一篇文章提到AQS是基于CLH lock queue,那么什么是CLH lock queue,说复杂很复杂说简单也简单, 所谓大道至简: CLH lock queue其实就是一个FIFO的队列,队列 ...

  4. CSS样式案例(1)-文字的排版

    本篇介绍的是小窗文字内容的排版,通过该篇文章可以让小伙伴们熟悉以下几个知识点: word-space.overflow.text-overflow. 最终的展示效果如下: 参考步骤: 1. 建立htm ...

  5. Mac Pro 编译安装 PHP扩展 -- Swoole扩展

    回顾下先前的安装笔记: PHP5不重新编译,如何安装自带的未安装过的扩展,如soap扩展? #下载 Swoole-1.8.10后,开始编译# cd /Users/jianbao/Downloads/s ...

  6. iOS并发编程指南之同步

    1.gcd fmdb使用了gcd,它是通过 建立系列化的G-C-D队列 从多线程同时调用调用方法,GCD也会按它接收的块的顺序来执行. fmdb使用的是dispatch_sync,多线程调用a ser ...

  7. RDS记录

    rdsafbnr32uzayn.mysql.rds.aliyuncs.com r7fysfqs90r74cm6

  8. Android SDK Manager 无法下载更新，或者更新速度超慢，或者待安装包列表不显示

    解决方法: 转自 http://www.cnblogs.com/tc310/archive/2012/12/21/2828450.html http://jingyan.baidu.com/artic ...

  9. nginx命令

    window  cmd 到nginx的文件夹 start nginx    启动命令 nginx -s reload 重新启动 nginx -s stop   关闭   linux   到 sbin ...

  10. [lintcode] Binary Tree Maximum Path Sum II

    Given a binary tree, find the maximum path sum from root. The path may end at any node in the tree a ...