实例教程:HTML中会移动的文字

我们在浏览页面的时候,会看到在页面上移动的文字,文字的移动方向有从左到右、从右到左、从上到下、从下到上等。下面,我们来看看如何使用HTML代码编写会移动的文字吧。

工具/材料

HTML

语法代码

(1)一般使用<marquee></marquee>来设置移动文字,比如我们编写如下代码:

(2)<marquee>会移动的文字</marquee>

预览效果可以发现编写在<marquee></marquee>标签内的文字,会从右边到左边循环移动,如下图所示:

文字移动速度

(1)使用scrollamount来设置文字的移动速度,比如我们编写如下所示代码:

<marquee scrollamount=16>快点,快点</marquee>

<marquee scrollamount=12>等等我</marquee>

(2)预览效果

可以看到scrollamount的数值越大,移动的速度就会越快,如下图所示:

设置文字移动的方向

(1)direction在英文上是方向的意思,同样使用direction来设置文字的移动方向,方向可以设置为左、右、上、下等等,编写如下代码:

<marquee direction=left>文字从右边向左边</marquee> <P>

<marquee direction=right>从左边向右边移</marquee>

(2)预览效果

可以看到当direction=left时,文字从右边向左边,当direction=right时,文字从左边向右边,如下图所示:

文字循环的次数

(1)一般来说文字是默认无限次循环的,下面,我们来看看如何指定文字的循环次数吧。使用loop来设置文字的循环次数,比如编写代码如下:

<marquee loop=3 >文字只会循环三次</marquee>

(2)预览效果

可以在浏览器上看到,文字只会循环三次,如下图所示:

文字对齐

在HTML中的文字对齐功能,使用align属性来设置,属性值可以为top、Middle、button,比如我们编写如下所示的代码:

(2)预览效果

然后在浏览器中预览效果,可以看到文字向上对齐,如下图所示:

移动面积

(1)设置会移动的文字范围,比如文字在长为多少,宽为多少的区域内移动,比如我们编写如下代码:

<marquee height=40 width=50% bgcolor=pink>在区域内移动的文字</marquee>

(2)预览效果

在浏览器中可以看到文字在高为40,宽为浏览器一半的区域内移动,且区域的颜色为粉红色,如下图所示:

延时

(1)设置文字的运行速度,让文字可以时而快,时而慢地做运动,编写代码如下所示:

(2)预览效果

在浏览器中预览效果,可以看到文字先做快速度,然后做慢速度,如下图所示:

怎样利用FrontPage添加文本动态HTML的效果?.

<style type=”text/css”>

.text{font-size:12px; color:#000;}

.text:hover{font-weight:bold; color:#f00;}

</style>

<span class=”text”>这里是文字,</span>

html中如何制作随着屏幕滚动的文字(就是会跟着屏幕走的文字)

图片滚动代码 (从右向左滚动)

<marquee scrollamount=1 scrolldelay=3 valign=middle behavior=”scroll”>

<img border=”0″ src=”/data/upload/help/202210/22/2e6c818dbaac4dd4714775b52c27e3e7.”>

<img border=”0″ src=”/data/upload/help/202210/22/727f9d2fb6f7390510e2c30707545878.”>

</marquee>

图片滚动代码 (从下往上滚动)

<marquee onMouseOver=”this.stop()” onMouseOut=”this.start()” align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior=”scroll”>

<img border=”0″ src=”/data/upload/help/202210/22/2e6c818dbaac4dd4714775b52c27e3e7.”>

<img border=”0″ src=”/data/upload/help/202210/22/727f9d2fb6f7390510e2c30707545878.”> <marquee ONMOUSEOUT=this.scrollDelay=1 ONMOUSEOVER=this.scrollDelay=600 scrollamount=1 SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle>

把图片的连接地址写在这里

</marquee>

1.direction属性:决定文本的滚动方向,分为向左left和向右right,up和down默认状态向左。

<marquee direction=left>从右向左滚动</marquee>

<marquee direction=right>从左向右滚动</marquee>

2.behavior属性:指定文本的滚动方式,分为三种:

Scroll:从一端消失后,在另一端出现并继续滚动。

<marquee behavior=scroll>一圈一圈地滚动</marquee>

Slide:从一端滚动,接触到另一端后停止

<marquee behaviro=slide>只滚动一次就停止</marquee>

Alternate:从一端滚动到另一端后,反向滚动。

<marquee behavior=alternate>来回滚动</marquee>

direction=up(left、right、down) 这个属性可以更改,这样就可以实现上下左右了 但是.我建议用一种无缝的文字滚动.这样的效果会比较好看.而用marquee就没那么好了方法代码 先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。

先了解一下对象的几个的属性:

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

向上滚动的代码:

<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src=”/data/upload/help/202210/22/df64e7045feb818b46aca818cc7ea31a.jpg” width=”156″ height=”200″ /><br><img src=”/data/upload/help/202210/22/9b3de88297a027f9beb878287366ab91.jpg” width=”160″ height=”198″ /><br><img src=”/data/upload/help/202210/22/74f086fd6dea26d0fefd5a789c2ef08d.jpg” width=”155″ height=”200″ /><br><img src=”/data/upload/help/202210/22/f76b11e0ea5a51a7d378eee9ae35ba06.jpg” width=”157″ height=”200″ /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2

function Marquee(){

if(demo2.offsetHeight-demo.scrollTop<=0)//当滚动至demo1与demo2交界时

demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端

else{

demo.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed)//设置定时器

demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器

</script>

向下滚动:

<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src=”/data/upload/help/202210/22/df64e7045feb818b46aca818cc7ea31a.jpg” width=”156″ height=”200″ /><br><img src=”/data/upload/help/202210/22/9b3de88297a027f9beb878287366ab91.jpg” width=”160″ height=”198″ /><br><img src=”/data/upload/help/202210/22/74f086fd6dea26d0fefd5a789c2ef08d.jpg” width=”155″ height=”200″ /><br><img src=”/data/upload/help/202210/22/f76b11e0ea5a51a7d378eee9ae35ba06.jpg” width=”157″ height=”200″ /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo.scrollTop<=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop–

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

向左滚动:

<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src=”/data/upload/help/202210/22/df64e7045feb818b46aca818cc7ea31a.jpg” width=”156″ height=”200″ /><img src=”/data/upload/help/202210/22/9b3de88297a027f9beb878287366ab91.jpg” width=”160″ height=”198″ /><img src=”/data/upload/help/202210/22/74f086fd6dea26d0fefd5a789c2ef08d.jpg” width=”155″ height=”200″ /><img src=”/data/upload/help/202210/22/f76b11e0ea5a51a7d378eee9ae35ba06.jpg” width=”157″ height=”200″ /></td><td id=demo2 valign=top></td></tr></table></div>

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

向右滚动:

<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src=”/data/upload/help/202210/22/df64e7045feb818b46aca818cc7ea31a.jpg” width=”156″ height=”200″ /><img src=”/data/upload/help/202210/22/9b3de88297a027f9beb878287366ab91.jpg” width=”160″ height=”198″ /><img src=”/data/upload/help/202210/22/74f086fd6dea26d0fefd5a789c2ef08d.jpg” width=”155″ height=”200″ /><img src=”/data/upload/help/202210/22/f76b11e0ea5a51a7d378eee9ae35ba06.jpg” width=”157″ height=”200″ /></td><td id=demo2 valign=top></td></tr></table></div>

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft–

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

HTML语言有一种会移动的文字,我想知道让文字象打字时的样子出现在文档里,这个怎么制作,不太会表达,谢

代码如下,可以根据需要进行相应修改:

<html>

<head>

<title>JS打字特效.html</title>

</head>

<script language=javascript>

var layers = document.layers, style = document.all, both = layers || style, idme = 908601;

if (layers) {

layerRef = ‘document.layers’;

styleRef = ”;

}

if (style) {

layerRef = ‘document.all’;

styleRef = ‘.style’;

}

function writeOnText(obj, str) {

if (layers)

with (document[obj]) {

document.open();

document.write(str);

document.close();

}

if (style)

eval(obj + ‘.innerHTML=str’);

}

var dispStr = new Array(“这里是你想要打的字”);

var overMe = 0;

function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) {

var tmp0 = tmp1 = ”, skip = 100;

if (both idx <= str.length) {

if (str.charAt(idx) == ‘<‘) {

while (str.charAt(idx) != ‘>’)

idx++;

idx++;

}

if (str.charAt(idx) == ” str.charAt(idx + 1) != ‘ ‘) {

while (str.charAt(idx) != ‘;’)

idx++;

idx++;

}

tmp0 = str.slice(0, idx);

tmp1 = str.charAt(idx++);

if (overMe == 0 plysnd == 1) {

if (navigator.plugins[0]) {

if (navigator.plugins[“LiveAudio”][0].type == “audio/basic”

navigator.javaEnabled()) {

document.embeds[0].stop();

setTimeout(“document.embeds[0].play(false)”, 100);

}

} else if (document.all) {

ding.Stop();

setTimeout(“ding.Run()”, 100);

}

overMe = 1;

} else

overMe = 0;

writeOnText(idObj, “<span class=” + spObj + “><font color='” + clr1

+ “‘>” + tmp0 + “</font><font color='” + clr2 + “‘>” + tmp1

+ “</font></span>”);

setTimeout(“txtTyper(‘” + str + “‘, ” + idx + “, ‘” + idObj + “‘, ‘”

+ spObj + “‘, ‘” + clr1 + “‘, ‘” + clr2 + “‘, ” + delay + ” ,”

+ plysnd + “)”, delay);

}

}

function init() {

txtTyper(dispStr[0], 0, ‘ttl0’, ‘ttl1’, ‘#339933’, ‘#99FF33’, 300, 0);

}

</script>

<BODY onload=init()>

<DIV class=ttl1 id=ttl0></DIV>

</BODY>

</html>

html css设置文字滚动

<marquee style=”WIDTH: 388px; HEIGHT: 200px” scrollamount=”2″ direction=”up” >

<div align=”left” >

</div >

<center ><font face=”黑体” color=”#008000″ size=”4″ ></font ></center >

<div align=”left” >

</div >

<center >

<p ><font color=”#ff6600″ size=”4″ >滚动文字</font ></p >

<p ><font color=”#ff4500″ size=”4″ >滚动文字</font ></p >

<p ><font color=”#ff3300″ size=”4″ >滚动文字</font >

</p >

</marquee >

marquee 参数:

BGColor:滚动文本框的背景颜色。

Direction:滚动方bai向设置,可选择Left、Right、up和down。

scrolldelay:每轮滚动之间的延迟时间,越大越慢。

scrollamount:一次滚动总的时间量,数字越小滚动越慢。

Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。

Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。

Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。

Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。

loop:滚动次数。默认为infinite

hspace、vspace:前后、上下的空行。

html移动文字怎么做?

有个标签是用来让文字移动的,

从右向左移 代码 <marquee direction=left>需要移动的文字</marquee>

从左向右移 代码 <marquee direction=right>需要移动的文字</marquee>