Js间断/连续的文字滚动代码

浏览数：16 / 时间：2015年06月09日

Js文字滚动代码，可设置间断滚动和连续滚动。滚动时是向上滚动的，控制Li列表滚动，兼容性表现地不错，兼容IE/火狐、Opera等浏览器，代码如下：前端框架分享

.代码  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">  

<html>  

<head>  

<title>文字间隔滚动代码-兼容IE和FireFox</title>  

<style type="text/css">  

<!--  

body {  

    text-align:center;  

}  

ul{  

margin:0px;  

padding:0px;  

list-style:none;  

}  

#andyscroll {  

    overflow: hidden;  

    background: #E8F8F8;  

    padding: 0 10px;  

    text-align: left;  

    width:400px;  

    height:100px;  

    overflow:hidden;  

}  

#andyscroll a {  

    font:12px/18px tahoma;  

    color: #000;   

    float:left;  

    width:100%;  

    text-decoration: none;  

    display:block;  

}  

#andyscroll a:hover {  

    font:12px/18px tahoma;  

    color: #F60;  

}  

-->  

</style>  

</head>  

<body>  

<div id="andyscroll">  

<div id="scrollmessage">  

<UL>  

<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  

<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  

<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  

<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  

<li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>  

<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  

<li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>  

<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  

<ul>  

</div>  

</div>  

<script type="text/javascript">  

var stopscroll = false;  

var scrollElem = document.getElementById("andyscroll");  

var marqueesHeight = scrollElem.style.height;  

scrollElem.onmouseover = new Function(‘stopscroll = true‘);  

scrollElem.onmouseout  = new Function(‘stopscroll = false‘);  

var preTop = 0;  

var currentTop = 0;  

var stoptime = 0;  

var leftElem = document.getElementById("scrollmessage");   

scrollElem.appendChild(leftElem.cloneNode(true));  

init_srolltext();  

function init_srolltext(){  

    scrollElem.scrollTop = 0;  

    setInterval(‘scrollUp()‘, 35);//确定滚动速度的, 数值越小, 速度越快  

}  

function scrollUp(){  

    if(stopscroll) return;  

    currentTop += 1; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动  

    if(currentTop == 19) {  

        stoptime += 1;  

        currentTop -= 1;  

        if(stoptime == 180) {  

            currentTop = 0;  

            stoptime = 0;  

        }  

    }else{  

        preTop = scrollElem.scrollTop;  

        scrollElem.scrollTop += 1;  

        if(preTop == scrollElem.scrollTop){  

            scrollElem.scrollTop = 0;  

            scrollElem.scrollTop += 1;  

        }  

    }  

}  

</script>  

</body>  

</html>