admin管理员组

文章数量:1794759

【HTML实现弹幕滚动效果和文字动态发光特效代码】

【HTML实现弹幕滚动效果和文字动态发光特效代码】

HTML实现弹幕滚动效果 我们经常会在看电影的时候，打开弹幕，以此来查看网友们对电影的实时评价。面对屏幕上一条一条滚动的弹幕，到底是如何实现的呢？   下面我们来介绍用HTML实现弹幕滚动的方法。 1.跑马灯标签（marquee） 标签名：marquee    跑马灯标签，独占一行 属性： behavior：设置滚动方式      scroll 一直重复      slide 只播放一次      alternate 来回弹动 direction 滚动的方向      right ：向右滚动      left ：向左滚动      up ：向上滚动      down：向下滚动 scrollamount 滚动的速度 ，数字表示 一、marquee标签的几个重要属性：

1.direction：滚动方向(包括4个值：up、down、left、right)

说明：up：从下向上滚动；down：从上向下滚动；left：从右向左滚动；right：从左向右滚动。

语法：…

2.behavior：滚动方式(包括3个值：scroll、slide、alternate)

说明：scroll：循环滚动，默认效果；slide：只滚动一次就停止；alternate：来回交替进行滚动。

语法：…

3.scrollamount：滚动速度(滚动速度是设置每次滚动时移动的长度，以像素为单位)

语法：…

4.scrolldelay:设定滚动两次之间的延迟时间，值大了会有一步一停顿的效果(设置滚动的时间间隔，单位是毫秒)

语法：…

5.loop：设定滚动循环的次数(默认值是-1，滚动会不断的循环下去)

语法：…

我会不停地走。

我只走两次哦

6.width、height：设定滚动字幕的宽度、高度

语法：…

7.bgcolor：设定滚动字幕的背景颜色(可以是颜色值，也可以是rgb()或rgba()函数)

语法：…

8.hspace、vspace：空白空间(相当于设置margin值)

说明：hspace：设定活动字幕里所在的位置距离父容器水平边框的距离，如hspace=“10”，即等同于：margin：0 10px；

vspace：设定活动字幕里所在的位置距离父容器垂直边框的距离，如vspace=“10”，即等同于：margin：10px 0；

语法：…(等同于：margin：10px；)

9.align：设定滚动字幕内容的对齐方式(包括9个值：absbottom、absmiddle、baseline、bottom、left、middle、right、 texttop、top)

说明：absbottom：绝对底部对齐（与g、p等字母的最下端对齐） absmiddle：绝对中央对齐 baseline：底线对齐 bottom：底部对齐（默认） left：左对齐 middle：中间对齐 right：右对齐 texttop：顶线对齐 top：顶部对齐

语法：…

10.face：设定滚动字幕的文字字体

语法：

11.color：设定滚动字幕的文字颜色

语法：

12.size：设定滚动字幕的文字字号

语法：

13.STRONG：设定滚动字幕的文字加粗

语法：

二、marquee常用到的两个事件：

onMouseOut=“this.start()” 用来设置鼠标移出该区域时继续滚动 onMouseOver=“this.stop()” 用来设置鼠标移入该区域时停止滚动

代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <marquee behavior="scroll" direction="left" scrollamount="30"><font color="red" size="15px" >666</font> </marquee> <marquee behavior="scroll" direction="left" scrollamount="20"><font color="aqua" size="20px">又五杀了</font> </marquee> <marquee behavior="scroll" direction="left" scrollamount="25"><font >666</font> </marquee> <marquee behavior="scroll" direction="left" scrollamount="20"><font color="pink" size="10px">666</font> </marquee> <marquee behavior="scroll" direction="left" scrollamount="28"><font color="red">666</font> </marquee> <marquee behavior="scroll" direction="left" scrollamount="20"><font color="greenyellow" size="20px">牛蛙牛蛙</font> </marquee> <marquee behavior="scroll" direction="left" scrollamount="10"><font size="16px" >666</font> </marquee> <marquee behavior="scroll" direction="left" scrollamount="15"><font color="pink" size="20px">厉害</font> </marquee> </div> </body> </html> ## 标题 **加粗样式**2 文字动态发光特效代码简单实现 ```bash 第一种方法： <html> <head> <title>文字动态发光特效代码</title> </head> <body bgcolor="#cccccc" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=blue,endColorStr=skyblue)"> <div id="myDiv" style="text-align:center;margin:100px auto;">css的世界是如此的精彩！</div> <script> function start1() { document.getElementById("myDiv").style.color = "red"; setTimeout("start2()", 100);//延时100毫秒执行下一个 } function start2() { document.getElementById("myDiv").style.color = "blue"; setTimeout("start3()", 100); } function start3() { document.getElementById("myDiv").style.color = "#BFAD09"; setTimeout("start4()", 100); } function start4() { document.getElementById("myDiv").style.color = "#009688"; setTimeout("start1()", 100); } start1();//执行一遍函数start1进入循环 </script> </body> </html>
第二种方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>简单文字变色</title> </head> <body> <script language="javascript"> var colors=new Array("red","orange","green","blue","browm","putple","gray","white"); var ind=0; function changecolor() { document.fgColor=colors[ind++]; if (ind==(colors.length)){ind=0} } setInterval("changecolor()",500); window.οnlοad=changecolor; </script> <h1 align="center">朋友欢迎您</h1> </body> </html>

本文标签： 效果文字特效代码动态弹幕

版权声明：本文标题：【HTML实现弹幕滚动效果和文字动态发光特效代码】 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686633867a88808.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。