求javascript实现的自下而上的滚动文字效果

发布网友发布时间：2022-04-24 01:02

共3个回答

热心网友时间：2022-04-22 08:45

最简单的滚动就是marquee，不过它效果不太好看，没有加速和停留的过程。
下面这段就是我常用的，效果很好，是从淘宝上取下的，经过我修改了一点点。

<style type="text/css">
#IssueList {
    margin:0px 0px;
    padding: 0;
    list-style: none;
    height: 20px;
    width:100px;
    overflow:hidden;
    background-color:#336699;
    color:#FFFFFF;
}
#IssueList li {
    font-size:13px;
    line-height: 20px;
}
</style>

<ul id="IssueList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
<script type="text/javascript">
(function(ul, delay, speed, lineHeight) {
var slideBox = (typeof ul == 'string')?document.getElementById(ul):ul;
var delay = delay||1000;
var speed=speed||20;
var lineHeight = lineHeight||20;
    var tid = null, pause = false;
    var start = function() {
     tid=setInterval(slide, speed);
    }
    var slide = function() {
     if (pause) return;
     slideBox.scrollTop += 2;
     if (slideBox.scrollTop % lineHeight == 0) {
         clearInterval(tid);
         slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
         slideBox.scrollTop = 0;
         setTimeout(start, delay);
        }
    }
    slideBox.onmouseover=function(){pause=true;}
    slideBox.onmouseout=function(){pause=false;}
    setTimeout(start, 2000);
})('IssueList', 1000, 2, 20);//停留时间，相对速度（越小越快）,每次滚动多少，最好和Li的Line-height一致。
</script>

热心网友时间：2022-04-22 10:03

<div id="marqueey" >
滚动内容
</div>

<script language="JavaScript">
marqueeyHeight=185; //滚动高度控制
stopscroll=false;
with(marqueey){
style.width=0;
style.height=marqueeyHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0;
function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueeyHeight){
templayer.innerHTML+=marqueey.innerHTML;
}
marqueey.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",80); //滚动速度控制,越大越慢
}
document.body.onload=init;
function scrollUp(){
if(stopscroll==true) return;
preTop=marqueey.scrollTop;
marqueey.scrollTop+=1;
if(preTop==marqueey.scrollTop){
marqueey.scrollTop=templayer.offsetHeight-marqueeyHeight;
marqueey.scrollTop+=1;
}
}
</script>

热心网友时间：2022-04-22 11:37

marquee

全部栏目

求javascript实现的自下而上的滚动文字效果