html向上无间隔滚动文字（图片）-蒲公英云

html向上无间隔滚动文字（图片）

梦里梦外; 2022-08-04 05:22 298阅读 0赞

利用JavaScript实现文字滚动效果

具体代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>向上无间隔滑动</title>
<script>
   window.onload = function() {
     var speed=30;
     var b=document.getElementById("b");
     var a=document.getElementById("a");
     var roll=document.getElementById("roll");
     b.innerHTML=a.innerHTML; //克隆a为b
     function Marquee1(){
        //当滚动至a与b交界时
        if(b.offsetTop-roll.scrollTop<=0){ 
         roll.scrollTop-=a.offsetHeight; //roll跳到最顶端
        }else{
         roll.scrollTop++
        }
    }
    var MyMar1=setInterval(Marquee1,speed)//设置定时器
    //鼠标移上时清除定时器达到滚动停止的目的
    roll.οnmοuseοver=function() {clearInterval(MyMar1)}
    //鼠标移开时重设定时器
    roll.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}
}
</script>
</head>
<body>
<div id="roll" style="overflow:hidden;height:253px;width:410px; background:#36F"> 
<div id="a">
 <!-- 将<p></p>标签中的文字变成图片即可得到图片滚动的效果 -->
<p><h3>青春————席慕容</h3>
<p>所有的结局都已写好<br>
所有的泪水也都已启程<br>
却忽然忘了是怎么样的一个开始<br>
在那个古老的不再回来的夏日<br>
无论我如何的去追索<br>
年轻的你只如云影掠过<br>
而你微笑的面容极浅极淡<br>
逐渐隐没在日落后的群岚<br>
逐翻开那发黄的扉页<br>
命运将它装订的极为拙劣<br>
含着泪 我一读再读<br>
却不得不承认<br>
青春<br>
是一本太仓促的书<br></p>
<p><h3>青春————席慕容</h3>
<p>所有的结局都已写好<br>
所有的泪水也都已启程<br>
却忽然忘了是怎么样的一个开始<br>
在那个古老的不再回来的夏日<br>
无论我如何的去追索<br>
年轻的你只如云影掠过<br>
而你微笑的面容极浅极淡<br>
逐渐隐没在日落后的群岚<br>
逐翻开那发黄的扉页<br>
命运将它装订的极为拙劣<br>
含着泪 我一读再读<br>
却不得不承认<br>
青春<br>
是一本太仓促的书<br></p>
</div>
<div id="b"></div>
</div>
</body>
</html>