js实现向上滚动效果

标签：

源码：

<style type="text/css">
    #up_zzjs{border:1px solid #ccc;width:170px;height:182px;line-height:20px;overflow:hidden;}
    #up_zzjs #up_li{list-style-type:none;margin:0;padding:0;margin-left:6px;}
    /*系统支持ie8就选line-height:16px;，但不支持opera 否则选line-height:20px;*/
    #up_zzjs #up_li a{font-size:12px; line-height:16px;}
</style>
<div id="up_zzjs">
    <ul id="marqueebox" style="border:1px red solid;">
        <li id="up_li">
            <a href="http://www.zzjs.net/" target="_blank">
                <span style="color:#FF0000">滚动文字一号</span></a>
        </li>
        <li id="up_li">
            <a href="http://www.zzjs.net/" target="_blank">
                <span style="color:#3333FF">滚动文字三号</span></a>
        </li>
        <li id="up_li">
            <a href="http://www.zzjs.net/" target="_blank">
                <span style="color:#3333FF">滚动文字五号</span></a>
        </li>
        <li id="up_li">
            <a href="http://www.zzjs.net/" target="_blank">
                <span style="color:#3333FF">滚动文字七号</span></a>
        </li>
    </ul>
</div>
        <script language="javascript">
            function startmarquee(lh,speed,delay) {
                var p=false;
                var t;
                var o=document.getElementById("marqueebox");
                o.innerHTML+=o.innerHTML;
                o.style.marginTop=0;
                o.onmouseover=function(){p=true;}
                o.onmouseout=function(){p=false;}
                function start(){
                    t=setInterval(scrolling,speed);
                    if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
                }
                function scrolling(){
                    if(parseInt(o.style.marginTop)%lh!=0){
                        o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
                        if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
                    }else{
                        clearInterval(t);
                        setTimeout(start,delay);
                    }
                }
                setTimeout(start,delay);
            }
            startmarquee(20,20,1500); // 第一个参数为上升的高度，第二个为速度
        </script>

说明，在ul <ul id="marqueebox" 设置一个固定大小高度的div <div id="up_zzjs">，ul会一直向上跑。

js实现向上滚动效果

标签：

原文地址：http://www.cnblogs.com/hsd1727728211/p/5330603.html