<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
{
margin: 0;
padding: 0;
}
scrollDiv {
position: relative;
margin: auto;
height: 70px;
width: 50%;
overflow: hidden;
border: 1px solid black;
}
scrollDiv ul {
position: absolute;
top: 0px;
}
scrollDiv ul>li {
height: 24px;
}
</style>
<script type="text/javascript">
windowonload = function ()
{
var oUl = documentgetElementById ('ul');
var ul1 = documentgetElementById ('ul1');
var ul2 = documentgetElementById ('ul2');
var t;
var funny = function (oUl, isUp, sleep)
{
if (!isUp)
{
oUlstyletop = "-22px";
oUlinsertBefore (oUlchildren[oUlchildrenlength - 1], oUlchildren[0]);
}
clearInterval (oUlt);
oUlt = setInterval (function ()
{
var tmp = isUp -22 : 3;
var speed = (tmp - (parseFloat (oUlstyletop) || oUloffsetTop)) / 9;
if (speed > 0)
{
speed = Mathceil (speed);
}
else if (speed < 0)
{
speed = Mathfloor (speed);
}
else
{
clearInterval (t);
!!isUp oUlstyletop = "3px" : 0;
!!isUp oUlappendChild (oUlchildren[0]) : 0;
}
oUlstyletop = (parseFloat (oUlstyletop) || oUloffsetTop) + speed + "px";
}, sleep);
}
oUlinterval = setInterval (function ()
{
funny (oUl, 1, 30);
}, 800);
ul1interval = setInterval (function ()
{
funny (ul1, 0, 50);
}, 800);
ul2interval = setInterval (function ()
{
funny (ul2, 1, 70);
}, 800);
}
</script>
</head>
<body>
<div class="scrollDiv">
<ul id="ul">
<li>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</li>
<li>第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行</li>
<li>第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行</li>
<li>第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行</li>
<li>第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行</li>
<li>第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行</li>
</ul>
</div>
<div style="top: 40px;" class="scrollDiv">
<ul id="ul1">
<li>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</li>
<li>第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行</li>
<li>第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行</li>
<li>第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行</li>
<li>第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行</li>
<li>第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行</li>
</ul>
</div>
<div style="top: 80px;" class="scrollDiv">
<ul id="ul2">
<li>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</li>
<li>第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行</li>
<li>第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行</li>
<li>第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行</li>
<li>第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行</li>
<li>第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行</li>
</ul>
</div>
</body>
</html>
步骤如下：
1、打开微信，先找到小程序入口。
2、搜索：闪屏d幕。
3、进入该小程序后，点击屏幕上的：d幕。
4、进入d幕页面，就可以手动修改d幕内容，点击设置，可以调节字体大小、颜色、播放速度等。
扩展资料：
“滚动字幕”是一种流行的字效，是流光字中的一种。人们一直使用滚字放在博客和空间上做装饰，也会用于广告牌、信息栏、提示牌字幕等。
由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了H5里面好像没有什么替代marquee的吧。如果有请共享。互相学习。
下面是js实现代码：
body {margin: 0px;
font-size: 12px;
color: #938C43;
line-height: 150%;
text-align:center;
}
a:link{color: #9D943A;font-size:12px;}
a:hover{color: #FF3300;font-size:12px;}
a:visited{color: #9D943A;font-size:12px;}
ared:link{color: #ff0000;font-size:12px;}
ared:hover{color: #ff0000;font-size:12px;}
ared:visited{color: #ff0000;font-size:12px;}
#marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;}
-->
</style>
</head>
<body>
<h4>滚动新闻</h4>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a href=>
工具/原料：
爱剪辑。
1、第一步，点击字幕特效选项卡。
2、第二步，选中字幕。
3、第三步，点击出现特效选项卡。
4、第四步，把菜单往下拉找到并点击向左滚动字幕。
5、第五步，点击播放试试按钮预览一下效果。
6、第六步，点击导出视频按钮导出视频即可。
网页的滚动字幕是用<marquee></marquee> 这一对标识确定的（还有JS方法等，鉴于太罗嗦，不做介绍了。如果要做上下滚动，可以用FLASH来做）。各种滚动效果的源码如下：（可以直接拷贝到网页源码<body></body>中使用）1字幕至边框停住<marquee behavior="slide" direction="left" scrollamount="9" scrolldelay="75">移动字幕自右至左停住的效果</marquee><marquee behavior="slide" direction="right" scrollamount="9" scrolldelay="75">移动字幕自左至右停住的效果</marquee>2字幕至边框移出循环<marquee scrollamount="9" scrolldelay="75">移动字幕自右至左出屏循环的效果</marquee><marquee direction="right" scrollamount="9" scrolldelay="75">移动字幕自左至右出屏循环的效果</marquee>3字幕至边框往复循环<marquee scrollamount="9" scrolldelay="75" behavior="alternate">移动字幕自右至左往复的效果</marquee><marquee direction="right" scrollamount="9" scrolldelay="75" behavior="alternate">移动字幕自左至右往复的效果</marquee>名词解释marquee|声明使用移动文字的效果scrollamount="9"|移动文字的速度scrolldelay="75">|移动文字的帧间隔时间scrollamount/scrolldelay的经验值约为1/9-1/7左右direction="right"|移动文字的方向（缺省不写本属性为向左）behavior="slide"|字幕至边框停住的效果behavior="alternate">|字幕至边框往复循环欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）