自己写的一段文字向上滚动特效，没有效果求指点。

<!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>

解决方案 »

  1.   

    scrollTop属性是只读的，同时，那个内部函数要放到外面才行，还有就是你取id的那几个地方，用纯英文的输入法下重写吧，那块好像有些错误，最好在纯英文的下重新写一下，然后自己再查看下有没有语法错误。另外，关于滚动，我个人只知道用绝对定位做。希望说的这些对你有参考意义。
      

  2.   

    你的思路要实现应当这样写。
    <!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>
      

  3.   

    你使用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>
      

  4.   

    循环的话把test中的内容复制到test01中就可以实现连续滚动，然后test底部超出test00顶部后把它移到test01后面就循环了。
      

  5.   

    之前写的一个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>