Marquee实现文字滚动代码

几排文字向上滚动  ,不过需要注意的是, marquee 标签并不是 HTML5 的标准标签,在一些现代的前端框架和严格的开发规范中可能不被推荐使用。但它确实能快速实现简单的文字滚动效果。



<MARQUEE direction=up οnmοuseοut=start(); οnmοuseοver=stop(); scrollAmount=1 scrollDelay=15 width=160 height=”100px”>
插入你要输入的文字</MARQUEE>



在输入文字时,如要它一行一行的出还要在每段文字的后面加上换行符<br> .



一些其他代码:



<marquee direction=left>从右向左移!</marquee><p>

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

<marquee behavior=scroll>一圈一圈绕着走!</marquee><p>

<marquee behavior=slide>只走一次就歇了!</marquee><p>

<marquee behavior=alternate>来回走!</marquee><p>

<marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee><p>

<marquee loop=3 width=50% behavior=slide>只走 3 趟!</marquee><p>

<marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee><p>

<marquee scrollamount=20>走得好快哟!</marquee>



文字滚动代码 (从右向左滚动)



<marquee width=”157″ height=”21″>要滚动的文字</marquee>



文字滚动代码 (从下往上滚动)



<marquee bgcolor=#ffffff class=p4 direction=up height=60 scrollamount=1 scrolldelay=50 style=”COLOR: #000000; class: ” width=157 text-align: left? border=”0″ ;>要滚动的文字</marquee>



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



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



<img border=”0″ src=”  http://要滚动的图片地址1″>



<img border=”0″ src=”  http://要滚动的图片地址2″>



</marquee>



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



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



<img border=”0″ src=”  http://要滚动的图片地址1″>



<img border=”0″ src=”  http://要滚动的图片地址2″>



</marquee>













Marquee属性&Marquee无间断滚动&Marquee鼠标经过滚动停止



Marquee属性

<MARQUEE ALIGN=”…”    

  behavior=”…”

  BGCOLOR=”…”

  DIRECTION=”…”

  HEIGHT=”…”

  WIDTH=”…”

  HSPACE=”…”

  VSPACE=”…”

  LOOP=”…”

  SCROLLAMOUNT=”…”

  SCROLLDELAY=”…”

>…</MARQUEE>



align:    对齐方式 LEFT,CENTER,RIGHT,TOP,BOTTOM (不用多说了)

behavior:    用于设定滚动的方式,主要由三种方式:

behavior=”scroll”:    表示由一端滚动到另一端;

behavior=”slide”:    表示由一端快速滑动到另一端,且不再重复;

behavior=”alternate” :    默认值–表示在两端之间来回滚动。

direction:    left(默认值) 左; right 右;up 上;down 下;

bgcolor:    背景颜色

height:    高度

weight:    宽度

Hspace/vspace:    分别用于设定滚动字幕的左右边框和上下边框的宽度。作用大概和css中的margin差不多

scrollamount:    用于设定每个连续滚动文本后面的间隔,该间隔用像素表示,以上是官方说法,其实就是滚动的速度,值不能太大,要不从视觉角度来说,是没反应的.值越大速度越快,反之越慢。

scrolldelay:    延迟时间

loop:    这个属性大家也很熟悉,循环次数;loop=-1的时候一直重复循环(默认值)



好,现在我们再来接触一些Dcode的一些知识。

首先是两个鼠标事件



onmouseover:    鼠标触发事件—当用户将鼠标指针移动到对象内时触发

onmouseout:    鼠标滑出事件—当用户将鼠标指针移出对象边界时触发

这里要用到的是 this.start() 与this.stop()

FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana”>意思就是鼠标移到marquee的内容上的时候停止循环,鼠标移开marquee 又开始移动。

继续

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

innerText:    设置或获取位于对象起始和结束标签内的文本

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

scrollTop:    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。PS:大家不要想当然的以为有scrollRigh和scrollDown :)

scrollDelay:    设置或获取字幕滚动的速度,要创建垂直滚动的字幕,请将其 scrollLeft 属性设定为0,要创建水平滚动的字幕,请将其 scrollTop 属性设定为 0,这将覆盖任何脚本设置

scrollHeight:    获取对象的滚动高度

scrollAmount:    设置或获取介于每个字幕绘制序列之间的文本滚动像素数

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

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

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

setInterval:    交互时间。它从载入后,每隔指定的时间就执行一次表达式

clearInterval:    使用 setInterval 方法取消先前开始的间隔事件。

  • 天道酬勤

    与人方便,与己方便。

    Related Posts

    PC端手机端自适应图片广告代码:+图片右下角带“广告”小字

    图片广告HTML: CSS代码(放入上面HTML代码<style> /* 这里将包含CSS样式,请将其放在<style>标签内 */ </style> : 以下是修改后的 CSS 代码,可满足电脑端显示不变,手机端不溢出窗口且同列的图片分列显示的需求:: 代码解释:.ad-container:box-sizing: border-box;:确保元素的宽度包含边框和内边距,避免元素因边框和内边距超出容器宽度。.small-ads:gap: 10px;:设置一个统一的图片间距,这个间距会应用于电脑端和手机端,你可以根据需要调整其大小。.small-ad-row:flex-direction: column;:在手机端将小图行的排列方式改为列排列,使同列图片分列显示。margin-bottom: 10px;:设置手机端小图行之间的间距,可根据需要调整。媒体查询 @media screen and (min-width: 768px):对于电脑端(屏幕宽度大于等于 768px):small-ad-row:将 flex-direction 改为 row,使小图行的排列方式为行排列。margin-bottom: 2px;:设置电脑端小图行之间的间距,可根据需要调整。small-ad:将 flex 属性设置为 0 0 calc(50%…

    常见的HTML网页特效代码

    One thought on “Marquee实现文字滚动代码

    Comments are closed.

    You Missed

    四大顶尖AI模型

    线上数字人体验地址

    DeepSeek在线使用平台汇总

    AI工具集

    分享目前最全AI工具合集

    python练习3