怎么让这段文字慢慢显示出来？

fkueyga6 2019-01-21 04:34:14
有一段文字，怎么让这段文字从上往下一行一行的显示出来，而不是一下就显示出来，应该怎么弄？
...全文
993 23 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
23 条回复
切换为时间正序
请发表友善的回复…
发表回复
好想长大 2019-02-03
  • 打赏
  • 举报
 回复
对不起，我写错了。 


<p id="l1">line 1</p>
<p hidden id="l2">line 2</p>
<p hidden id="l3">line 3</p>
<script>
var a=1
q=setInterval((function b(){try{
eval('l'+a+'.hidden=false')
a++
}catch{
    clearInterval(q)
}}),1000)
</script>
好想长大 2019-02-03
  • 打赏
  • 举报
 回复 

<p id="l1">line 1</p>
<p hidden id="l2">line 2</p>
<p hidden id="l3">line 3</p>
<script>
var a=1
while(true){
try{
eval('l'+a+'.hidden=false')
}catch{
break
}
a++
}
</script>
「已注销」 2019-02-03
  • 打赏
  • 举报
 回复
用js原生，把内容按行存储在数组中，然后用定时器一个一个的添加进去。
老马历写记 2019-02-02
  • 打赏
  • 举报
 回复
好，这是之前小朋友要玩给写的左右跑的，稍微改下就可以，看又无参考价值，https://blog.csdn.net/chuangxin/article/details/84943007
Tuttikiwi 2019-01-28
  • 打赏
  • 举报
 回复
加个动画效果试试
fkueyga6 2019-01-26
  • 打赏
  • 举报
 回复
我搞错了，应该要从上往下挡住内容，而且如果内容超出屏幕，这个图片还要能自动往下移动挡住内容。这个是不是比较难实现？
fkueyga6 2019-01-26
  • 打赏
  • 举报
 回复
引用 15 楼 天际的海浪 的回复:


<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

<style type="text/css">

@keyframes anim{

	  0% {top: 0px;}

	100% {top: -200px;}

}

#d2 {

	background-color: #ff0;

	position: relative;

	z-index: 99;

	animation: anim 2s forwards;

}

</style>

</head>

<body>

<div id="d1" style="width: 100%; height:200px;">

我是d1的内容

</div>

<div id="d2">

<img src="images/153535.jpg"  width="100%" height="200">

</div>

</body>

</html>

太感谢了，但还有一个问题，就是d1的内容可能会超过200px的高度，d2的图片高度要根据d1的内容高度去调整，不然不能完全挡住内容
天际的海浪 2019-01-26
  • 打赏
  • 举报
 回复 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#d2 {
	background-color: #ff0;
	position: relative;
	z-index: 99;
	top: 0px;
	transition: top 2s;
}
</style>
</head>
<body>
<div id="d1" style="width: 100%; height:200px;">
我是d1的内容
</div>
<div id="d2">
<img src="images/153535.jpg"  width="100%" height="100%">
</div>
<script type="text/javascript">
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var oh = d1.offsetHeight;
d2.style.height = oh+"px";
d2.style.marginTop = -oh+"px";
d2.style.top = oh+"px";
</script>
</body>
</html>
天际的海浪 2019-01-25
  • 打赏
  • 举报
 回复 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
@keyframes anim{
	  0% {top: 0px;}
	100% {top: -200px;}
}
#d2 {
	background-color: #ff0;
	position: relative;
	z-index: 99;
	animation: anim 2s forwards;
}
</style>
</head>
<body>
<div id="d1" style="width: 100%; height:200px;">
我是d1的内容
</div>
<div id="d2">
<img src="images/153535.jpg"  width="100%" height="200">
</div>
</body>
</html>
fkueyga6 2019-01-25
  • 打赏
  • 举报
 回复
引用 13 楼 天际的海浪 的回复:
[quote=引用 12 楼 fkueyga6 的回复:]
[quote=引用 11 楼 天际的海浪 的回复:]


<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

<style type="text/css">

#box {

	line-height: 20px;

	overflow: hidden;

	height: 0;

	border: 1px solid #999;

}

</style>

</head>

<body>



<div id="box">

	content 1 <br>

	content 2 <br>

	content 3 <br>

	content 4 <br>

	content 5 <br>

	content 6 <br>

	content 7 <br>

</div>

<script type="text/javascript">

function loop() {

	var box = document.getElementById("box");

	var h = box.clientHeight+20;

	var sh = box.scrollHeight;

	box.style.height = h+"px";

	if (h<sh)

		setTimeout(loop, 500);

}

loop();

</script>

</body>

</html>

但是，我中间的内容不会这么规则，有那么多<br>[/quote]
你是什么内容。只要每行的行高一致就行[/quote]

要不您帮我写一下这样的：

怎么在一定时间内让d2从d1的底部从下往上的盖住d1
<div id="d1" style="width: 100%; height:200px;">
我是d1的内容
</div>
<div id="d2">
<img src="images/153535.jpg" width="100%" height="200">
</div>
天际的海浪 2019-01-25
  • 打赏
  • 举报
 回复
引用 12 楼 fkueyga6 的回复:
[quote=引用 11 楼 天际的海浪 的回复:] 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#box {
	line-height: 20px;
	overflow: hidden;
	height: 0;
	border: 1px solid #999;
}
</style>
</head>
<body>

<div id="box">
	content 1 <br>
	content 2 <br>
	content 3 <br>
	content 4 <br>
	content 5 <br>
	content 6 <br>
	content 7 <br>
</div>
<script type="text/javascript">
function loop() {
	var box = document.getElementById("box");
	var h = box.clientHeight+20;
	var sh = box.scrollHeight;
	box.style.height = h+"px";
	if (h<sh)
		setTimeout(loop, 500);
}
loop();
</script>
</body>
</html>
但是，我中间的内容不会这么规则，有那么多<br>[/quote] 你是什么内容。只要每行的行高一致就行
fkueyga6 2019-01-25
  • 打赏
  • 举报
 回复
引用 11 楼 天际的海浪 的回复:


<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

<style type="text/css">

#box {

	line-height: 20px;

	overflow: hidden;

	height: 0;

	border: 1px solid #999;

}

</style>

</head>

<body>



<div id="box">

	content 1 <br>

	content 2 <br>

	content 3 <br>

	content 4 <br>

	content 5 <br>

	content 6 <br>

	content 7 <br>

</div>

<script type="text/javascript">

function loop() {

	var box = document.getElementById("box");

	var h = box.clientHeight+20;

	var sh = box.scrollHeight;

	box.style.height = h+"px";

	if (h<sh)

		setTimeout(loop, 500);

}

loop();

</script>

</body>

</html>

但是，我中间的内容不会这么规则，有那么多<br>
天际的海浪 2019-01-25
  • 打赏
  • 举报
 回复 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#box {
	line-height: 20px;
	overflow: hidden;
	height: 0;
	border: 1px solid #999;
}
</style>
</head>
<body>

<div id="box">
	content 1 <br>
	content 2 <br>
	content 3 <br>
	content 4 <br>
	content 5 <br>
	content 6 <br>
	content 7 <br>
</div>
<script type="text/javascript">
function loop() {
	var box = document.getElementById("box");
	var h = box.clientHeight+20;
	var sh = box.scrollHeight;
	box.style.height = h+"px";
	if (h<sh)
		setTimeout(loop, 500);
}
loop();
</script>
</body>
</html>
fkueyga6 2019-01-25
  • 打赏
  • 举报
 回复
或者这样：
怎么在一定时间内让d2从d1的底部从下往上的盖住d1

<div id="d1" style="width: 100%; height:200px;">
我是d1的内容
</div>

<div id="d2">
<img src="images/153535.jpg" width="100%" height="200">
</div>

Kepler_ 2019-01-24
  • 打赏
  • 举报
 回复
动画+delay 呀。
fkueyga6 2019-01-23
  • 打赏
  • 举报
 回复
引用 3 楼 風灬雲 的回复:
用个div挡住，然后从上往下慢慢显示；或者高度设置为0，overflow:hidden;然后慢慢加高度


麻烦您帮我写一下可以吗，谢谢
fkueyga6 2019-01-23
  • 打赏
  • 举报
 回复
引用 6 楼 无限_设计 的回复:
接上：主要用到“OUTTIME”函数


麻烦您帮我写一下可以吗，谢谢
fkueyga6 2019-01-22
  • 打赏
  • 举报
 回复
引用 1 楼 天际的海浪 的回复:
你的问题和这个一样
https://bbs.csdn.net/topics/392512408

他这个是一个字一个字的显示，我想要一行一行的显示出来
无限_设计 2019-01-22
  • 打赏
  • 举报
 回复
接上：主要用到“OUTTIME”函数
无限_设计 2019-01-22
  • 打赏
  • 举报
 回复
用jq，如果看到的行数只有一行，修改marginTop的值，如果是查看的行数增加可以修改div的高度， 最主要的是“out鼻梁骨”
加载更多回复（3）
JavaScript/JS 实现文字逐个显示 延迟缓慢展示
将以下代码保存为html文件后，在浏览器打开即可看到效果。 <!DOCTYPE html> <... <head> <meta charset="utf-8" />... js实现文字逐渐显示 </title> <script type="text/javascript
html 字显示效果,js原生文字一个一个显示效果
今日对文字一个一个显示出来的特效给吸引，决定用原生的给实现出来，实现运用到的substring方法、setInterval计时器、clearInterval、css样式、pre标签等；基本原理：1)substring作用是截取字符串，把截取的字符串传...
html、css、js、react、vue 文字一行一行显示出来
文字一行一行显示出来 无非就三种方式 1、使用css控制：底层一个完整页面，上层一个只有背景图的完整页面，通过动画渐渐向下移动上层div，使底层div信息逐渐展示出来，以达到渐显的效果，但视觉效果较差。...
html 中文字逐个显示,js和css3实现字体逐个显示
如果没有这个属性，会出现先闪烁完，才出现英文单词的情况； } #picture:hover~#show { animation: cursor 1s step-end infinite,typing 8s steps(20) forwards; //forwards停在动画的结束状态； border-right: 2px...
WPF textBox中简单处理文字滚动显示问题，另外用代码去边框
WPF textBox中简单滚动处理文字显示问题，另外在代码去掉边框
HTML5

39,118

社区成员

5,568

社区内容

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章