87,991
社区成员
发帖
与我相关
我的任务
分享自己写的一段文字向上滚动特效，没有效果求指点。
<!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=gb2312" />
<title>无标题文档</title>
<style>
#test{
height:120px;
}
#test ul li{
}
#test00{
line-height:normal;
overflow:hidden;
}
#test00 ul li{
list-style-type:none;
}
</style>
</head>
<body>
<script language="javascript">
function scroll01()
{
function scroll02()
{
var a = document.getElementById("test00");
var x = document.getElementById("test");
var y = document.getElementById("test01");
a.scrollTop=a.scrollTop-x.offsetHeight;
};
setInterval("scroll02()",10);
}
</script>
<div id="test00">
<div id="test">
<ul>
<li>wo</li>
<li>ai</li>
<li>ni</li>
<li>wo</li>
<li>ai</li>
<li>ni</li>
<li>wo</li>
<li>ai</li>
<li>ni</li>
</ul>
</div>
<div id="test01"></div>
</div>
<script language="javascript">scroll01();</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
Kilin_Zhang 2013-03-11
- 打赏
- 举报
之前写的一个demo，楼主可以参考下
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
*{ margin:0px; padding:0px}
body{ text-align:center}
img{ border:0}
#img_lunbo{ width:1000px; height:300px; overflow:hidden; position:relative;}
#img_lunbo .img_list{ width:1000px; height:300px;overflow:hidden}
#img_lunbo .img_list li{ list-style:none; width:1000px; height:300px;}
#img_lunbo .num{ position:absolute; bottom:20px; right:20px}
#img_lunbo .num li{ width:14px; height:14px; float:left; list-style:none; display:block; line-height:14px; text-align:center; background:#FFF; border:1px solid #F00; cursor:pointer; margin-left:5px}
#img_lunbo .num .active{ background:#F00; color:#FFF}
</style>
</head>
<body>
<div id="img_lunbo">
<div id="imgPanel" class="img_list">
<div id="imgPanel1">
<ul>
<li><a href="#"><img src="images/1.jpg"/></a></li>
<li><a href="#"><img src="images/2.jpg"/></a></li>
<li><a href="#"><img src="images/3.jpg"/></a></li>
</ul>
</div>
<div id="imgPanel2"></div>
</div>
<div id="num" class="num">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<script type="text/javascript">
(function () {
var imgPanel = document.getElementById("imgPanel");
var imgPanel1 = document.getElementById("imgPanel1");
var imgPanel2 = document.getElementById("imgPanel2");
var aArr = document.getElementById("num").getElementsByTagName("ul")[0].getElementsByTagName("li");
imgPanel2.innerHTML = imgPanel1.innerHTML;
var maxHeight = imgPanel.offsetHeight,
speed = 3000,
timer,
index = 0;
function marquee() {
if (imgPanel2.offsetTop - imgPanel.scrollTop <= 0) {
imgPanel.scrollTop -= imgPanel1.offsetHeight;
} else {
imgPanel.scrollTop += 3;
maxHeight -= 3;
if (maxHeight <= 0) {
clearInterval(timer);
begin();
}
}
}
function changePage() {
aArr[index].className = "";
index = ++index % aArr.length;
aArr[index].className = "active";
}
function begin() {
setTimeout(function () {
maxHeight = imgPanel.offsetHeight;
timer = setInterval(marquee, 2)//设置定时器
changePage();
}, speed);
};
begin();
})();
</script>
wohuifude123 2013-03-11
- 打赏
- 举报
谢谢楼上这位大神
菜牛 2013-03-10
- 打赏
- 举报
循环的话把test中的内容复制到test01中就可以实现连续滚动，然后test底部超出test00顶部后把它移到test01后面就循环了。
菜牛 2013-03-10
- 打赏
- 举报
你使用scrollTop属性，所以父元素的高度要比子元素小才有滚动效果；另外，那个x.offsetHeight一直是0。
<!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=gb2312" />
<title>文档</title>
<style type="text/css">
#test {
}
#test ul li {
}
#test00 {
line-height: normal;
overflow: hidden;
height: 100px;
}
#test00 ul li {
list-style-type: none;
}
</style>
</head>
<body>
<div id="test00">
<div id="test">
<ul>
<li>wo</li>
<li>ai</li>
<li>ni</li>
<li>wo</li>
<li>ai</li>
<li>ni</li>
<li>wo</li>
<li>ai</li>
<li>ni</li>
</ul>
</div>
<div id="test01"></div>
</div>
<script type="text/javascript">
function scroll02() {
var a = document.getElementById("test00");
a.scrollTop = a.scrollTop + 10;
};
setInterval("scroll02()", 1000);
</script>
</body>
</html>
ftiger 2013-03-10
- 打赏
- 举报
文字自动向上翻动实现了，不过不能循环，你自己再想想如何改吧。
wohuifude123 2013-03-10
- 打赏
- 举报
谢谢楼上，不过我的目的是想让文字自动向上翻动。
ftiger 2013-03-10
- 打赏
- 举报
你的思路要实现应当这样写。
<!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>
#test{
height:120px;
overflow:auto;
}
#test ul li{
}
#test00{
line-height:normal;
overflow:hidden;
}
#test00 ul li{
list-style-type:none;
}
</style>
</head>
<body>
<script language="javascript">
var scroll02 =function ()
{
console.log("xx");
var a = document.getElementById("test00");
var x = document.getElementById("test");
var y = document.getElementById("test01");
console.log(x.scrollTop);
x.scrollTop=x.scrollTop+5;
};
</script>
<div id="test00">
<div id="test">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
</ul>
</div>
<div id="test01"></div>
</div>
<script language="javascript">setInterval("scroll02()",40);console.log(scroll02.toString());</script>
</body>
</html>
张运领 2013-03-10
- 打赏
- 举报
scrollTop属性是只读的，同时，那个内部函数要放到外面才行，还有就是你取id的那几个地方，用纯英文的输入法下重写吧，那块好像有些错误，最好在纯英文的下重新写一下，然后自己再查看下有没有语法错误。另外，关于滚动，我个人只知道用绝对定位做。希望说的这些对你有参考意义。
wohuifude123 2013-03-10
- 打赏
- 举报
求助，哪里写错了，为什么没有任何效果。
