js新手求问

ssl970432178 2016-07-30 01:26:25
信息往上滚动效果制作，正确效果截图是这样



我想问：scrollTop是卷起来的高度意思，con1和con2长度总共是18，，当moocBox.scrollTop==document.getElementById("con1").offsetHeight时，不就是接着从con1开始卷起1，2，3，4，5，6，7，8，9，然后又1，2，3，4，5，6，7，8，9，感觉不用con2行，但是我不设置con2,只能第一次1~9，无法循环1~9
代码：
<!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 moocBox=document.getElementById("moocBox");
var i=0;
document.getElementById("con2").innerHTML=document.getElementById("con1").innerHTML;
function yidong(){
moocBox.scrollTop=i++;
if(moocBox.scrollTop==document.getElementById("con1").offsetHeight){

i=0;
}

}
setInterval(yidong,100);
</script>

</body>
</html>
...全文
126 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
cocotsau 2016-07-30
  • 打赏
  • 举报
 回复
引用 2楼我是你的主体 的回复:
是子元素向上滚动吗？？？？@cocotsau [quote=引用 1 楼 perhapschen 的回复:] scrollTop指的是向上滚动的高度，div#moocBox节点的可滚动最大高度等于moocBox.scrollHeight - moocBox.offsetHeight。 其中offsetHeight表示moocBox设置的高度，scrollHeight表示滚动高度 try this 

var moocBox = document.getElementById("moocBox");
// var con1    = document.getElementById("con1");
var i = 0;
// document.getElementById("con2").innerHTML = document.getElementById("con1").innerHTML;
console.log(moocBox.scrollHeight);
function yidong() {
	moocBox.scrollTop = i++;
	if (moocBox.scrollTop == moocBox.scrollHeight - moocBox.offsetHeight) {
		i = 0;
	}
}
setInterval(yidong, 100);
[/quote]对，是容器包含的内容向上滚动
天际的海浪 2016-07-30
  • 打赏
  • 举报
 回复
scrollTop就是滚动条滚动的距离。这个值不能小于0，也不能超出滚动条滚动的范围，就是不能大于scrollHeight -offsetHeight 就好比我们这个论坛页面，当页面滚动到最底部就不能再继续向下滚动了，你不能让页面内容都跑上面去，在下方出现大片空白。
碧海情天-赵亮 2016-07-30
  • 打赏
  • 举报
 回复
所以你看见con2空着就想把它去掉，当然不行。 哪些有用，哪些没用，必须从代码上理解透才能判断，不要仅从表面形式出发。
碧海情天-赵亮 2016-07-30
  • 打赏
  • 举报
 回复
document.getElementById("con2").innerHTML=document.getElementById("con1").innerHTML; 这句是能够产生无缝滚动的关键。在con2里复制了和con1完全相同的内容。这样，当第9条信息向上滚动时，第1条和第2条等等后面的会跟着向上滚动。 然后下面的代码在上滚时，判断滚动的位置，如果正好达到con1的高度，即第9条信息向上滚动进入最顶部，则恢复到起始位置重新上滚。
ssl970432178 2016-07-30
  • 打赏
  • 举报
 回复
是子元素向上滚动吗？？？？@cocotsau
引用 1 楼 perhapschen 的回复:
scrollTop指的是向上滚动的高度，div#moocBox节点的可滚动最大高度等于moocBox.scrollHeight - moocBox.offsetHeight。 其中offsetHeight表示moocBox设置的高度，scrollHeight表示滚动高度 try this 

var moocBox = document.getElementById("moocBox");
// var con1    = document.getElementById("con1");
var i = 0;
// document.getElementById("con2").innerHTML = document.getElementById("con1").innerHTML;
console.log(moocBox.scrollHeight);
function yidong() {
	moocBox.scrollTop = i++;
	if (moocBox.scrollTop == moocBox.scrollHeight - moocBox.offsetHeight) {
		i = 0;
	}
}
setInterval(yidong, 100);
cocotsau 2016-07-30
  • 打赏
  • 举报
 回复
scrollTop指的是向上滚动的高度，div#moocBox节点的可滚动最大高度等于moocBox.scrollHeight - moocBox.offsetHeight。 其中offsetHeight表示moocBox设置的高度，scrollHeight表示滚动高度 try this 

var moocBox = document.getElementById("moocBox");
// var con1    = document.getElementById("con1");
var i = 0;
// document.getElementById("con2").innerHTML = document.getElementById("con1").innerHTML;
console.log(moocBox.scrollHeight);
function yidong() {
	moocBox.scrollTop = i++;
	if (moocBox.scrollTop == moocBox.scrollHeight - moocBox.offsetHeight) {
		i = 0;
	}
}
setInterval(yidong, 100);
JavaScript教程：适合新手的js代码使用方法和技巧大全
JavaScript教程：适合新手的js代码使用方法和技巧大全
JavaScript 入门 新手学习笔记
新手入门JS超详细笔记 各个版本都有，格式条理清晰标注含有例题以及解析
NW.JS 跨平台桌面客户端新手快速入门实战
如果你想找的就是一个可以跨平台的、轻量级的图形界面开发的库，轻松快捷地开发新一代桌面客户端软件程序。那么，大喵给大家推荐NW.JS， 它就像一座灯塔，冥冥之中照亮了桌面UI图形开发前进的方向。我们来看下它的基本特点：1. 支持用HTML5, CSS3, JS和WebGL来写应用程序，包括桌面端和移动端；2. 完全支持Node.js APIs和所有的第三方模块；3. 性能也不会很差，对于轻量级的应用足够了；4. 对应用进行打包和发布十分简单，也就是说写一份代码很容易移植到不同的平台（包括主流的Linux, Mac OS X 和 Windows）；课程基本介绍：本课程属于 NW.JS新手入门跨平台项目实战课程，适合各个阶段的开发人员，大喵将会教会大家学习NW技术且掌握如何使用前端技术（HTML5，CSS3，Javascript）轻松愉快地快速开发新一代跨平台桌面客户端应用。
JavaScript入门教程(适合新手)
一部很适合新手看的JavaScript教程
javascript 字符串的验证基础篇之JS（适合新手）
javascript 字符串的验证基础中的JavaScript，叫你怎么用JavaScript编写网站。
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章