html 代码
- <!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>
- body {
- font-size: 12px;
- line-height: 24px;
- text-algin: center; /* 页面内容居中 */
- }
- * {
- margin: 0px;
- padding: 0px; /* 去掉所有标签的 marign 和 padding 的值 */
- }
- ul {
- list-style: none; /* 去掉 ul 标签默认的点样式 */
- }
- a img {
- border: none; /* 超链接下, 图片的边框 */
- }
- a {
- color: #333;
- text-decoration: none; /* 超链接样式 */
- }
- a:hover {
- color: #ff0000;
- }
- #mooc {
- width: 399px;
- border: 5px solid #ababab;
- -moz-border-radius: 15px; /* Gecko browsers */
- -webkit-border-radius: 15px; /* Webkit browsers */
- border-radius: 15px;
- box-shadow: 2px 2px 10px #ababab;
- margin: 50px auto 0;
- text-align: left; /* 让新闻内容靠左 */
- }
- /* 头部样式 */
- #moocTitle {
- height: 62px;
- overflow: hidden;
- font-size: 26px;
- line-height: 62px;
- padding-left: 30px;
- background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
- border: 1px solid ##f05e6f;
- -moz-border-radius: 8px 8px 0 0; /* Gecko browsers */
- -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */
- border-radius: 8px 8px 0 0;
- color: #fff;
- position: relative;
- }
- #moocTitle a {
- position: absolute;
- right: 10px;
- bottom: 10px;
- display: inline;
- color: #fff;
- font-size: 12px;
- line-height: 24px;
- }
- /* 底部样式 */
- #moocBot {
- width: 399px;
- height: 10px;
- overflow: hidden; /* 这个一定要加上, 内容超出的部分要隐藏, 免得撑高底部结构 */
- }
- /* 中间样式 */
- #moocBox {
- height: 144px;
- width: 335px;
- margin-left: 25px;
- margin-top: 10px;
- overflow: hidden; /* 这个一定要加, 超出的内容部分要隐藏, 免得撑高中间部分 */
- }
- #mooc ul li {
- height: 24px;
- }
- #mooc ul li a {
- width: 180px;
- float: left;
- display: block;
- overflow: hidden;
- text-indent: 15px;
- height: 24px;
- }
- #mooc ul li span {
- float: right;
- color: #999;
- }
- </style>
- </head>
- <body>
- <div id="mooc">
- <h3 id="moocTitle"> 最新课程 < a href="#" target="_self"> 更多 >></a> </h3>
- <div id="moocBox">
- <ul id="con1">
- <li><a href="#">1. 学会 html5 绝对的屌丝逆袭 (案例)</a><span>2013-09-18</span></li>
- <li><a href="#">2.tab 页面切换效果 (案例)</a><span>2013-10-09</span></li>
- <li><a href="#">3. 圆角水晶按钮制作 (案例)</a><span>2013-10-21</span></li>
- <li><a href="#">4.HTML+CSS 基础课程 (系列)</a><span>2013-11-01</span></li>
- <li><a href="#">5. 分页页码制作 (案例)</a><span>2013-11-06</span></li>
- <li><a href="#">6. 导航条菜单的制作 (案例)</a><span>2013-11-08</span></li>
- <li><a href="#">7. 信息列表制作 (案例)</a><span>2013-11-15</span></li>
- <li><a href="#">8. 下拉菜单制作 (案例)</a><span>2013-11-22</span></li>
- <li><a href="#">9. 如何实现 "新手引导" 效果 </a><span>2013-12-06</span></li>
- </ul>
- <ul id="con2">
- </ul>
- </div>
- </div>
- <script type="text/javascript">
- var area = document.getElementById('moocBox');
- var time ;
- area.innerHTML += area.innerHTML;
- area.scrollTop = 0 ;
- var lineH = 24;
- function startMove() {
- area.scrollTop ++;
- time = setInterval("scrollUp()",50);
- }
- function scrollUp() {
- //area.scrollTop ++;
- if (area.scrollTop % 48 == 0) {
- clearInterval(time);
- setTimeout("startMove()",1000);
- } else {
- area.scrollTop ++;
- if (area.scrollTop>= area.scrollHeight/2) {
- area.scrollTop = 0;
- }
- }
- }
- setTimeout("startMove()",1000);
- </script>
- </body>
- </html>
第一个问题 是在 startMove() 中 area.scrollTop++ 为什么不能放在 scrollUp 中 (注释的 area.scrollTop ++;),
第二个问题 我想 添加两个事件 鼠标移入滚动停止 鼠标一处 滚动继续 应该怎么编写
第三个问题 为什么当第 9 个 li 滚动完毕的时候 也会停 2s 再执行滚动呢
来源: http://www.qdfuns.com/article/30102/7e00f4b60fc320590e5d6b64abc6f7b8.html