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

最新推荐文章于 2024-05-05 07:41:03 发布

fang0609

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量1.8k

点赞数 2

分类专栏： html 文章标签： html javascript 文字图片滚动

本文链接：https://blog.csdn.net/fang0609/article/details/47776359

版权

html 专栏收录该内容

2 篇文章 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>

fang0609

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html向上无间隔滚动文字（图片）

利用JavaScript实现文字滚动效果具体代码如下：向上无间隔滑动 window.onload = function() { var speed=30; var b=document.getElementById("b"); var a=document.getElementById("a"); var roll=document.getElementById
复制链接

扫一扫