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

梦里梦外; 2022-08-04 05:22 158阅读 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><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>