常见的html滚动代码大全

站长随笔 1年前 (2023) admin
2,735 0

html滚动代码大全

[HTML代码]会移动的文字(Marquee)

Marquee标记用于在可用浏览区域中滚动文本。这个标记只适用于IE3以后的版的浏览器。
格式:
<MARQUEE ALIGN="…"
BEHAVIOR="…"
BGCOLOR="…"
DIRECTION="…"
HEIGHT="…"
WIDTH="…"
HSPACE="…"
VSPACE="…"
LOOP="…"
SCROLLAMOUNT="…"
SCROLLDELAY="…"
ONMOUSEOUT=this.start() 
ONMOUSEOVER=this.stop()
>…
</MARQUEE>

属性:
ALIGN:用于按设定的值对齐滚动的文本。ALIGN可以设定的值有:LEFT,CENTER,RIGHT,TOP,BOTTOM。此属性不是必须使用的。
例:
<MARQUEE ALIGN="TOP">这段滚动文字设定为上对齐</MARQUEE>

BEHAVIOR:可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是SLIDE,那么文本就移动到文档上,并停留在页边距上。如果设定为ALTERNATE,则文本从一边移动到另一边。如果设定为SCROLL,文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有:SILIDE,ALTERNATE,SCROLL。
例:
<MARQUEE BEHAVIOR="ALTERNATE">文字从一边移动到另一边</MARQUEE>

BGCOLOR:用于设定字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。
例:
<MARQUEE BGCOLOR="RED">用颜色名称设定滚动文字背景颜色为红色</MARQUEE>
<MARQUEE BGCOLOR="#FF0000">用16进制值设定滚动文字背景颜色为红色</MARQUEE>
<MARQUEE BGCOLOR=RGB(100%,0%,0%)>用RGB设定滚动文字背景颜色为红色</MARQUEE>

DIRECTION:用于设定文本滚动的方向,可以设定的值有:LEFT,RIGHT。此属性不是必须使用的。
例:
<MARQUEE DIRECTION="LEFT">文字向左边滚动</MARQUEE>
<MARQUEE DIRECTION="RIGHT">文字向右边滚动</MARQUEE>

HEIGHT:用于设定滚动字幕的高度,高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。
例:
<MARQUEE HEIGHT="10%">滚动字幕的高度是可视页面的10%</MARQUEE>
<MARQUEE HEIGHT="12">滚动字幕的高度是12像素</MARQUEE>

WIDTH:用于设定字幕的宽度,宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。
例:
<MARQUEE WIDTH="90%">滚动字幕的宽度是可视页面的90%</MARQUEE>
<MARQUEE WIDTH="200">滚动字幕的宽度是200像素</MARQUEE>

HSPACE:用于设定滚动字幕左右的空白空间,空白空间用像素表示。此属性不是必须使用的。
例:
<MARQUEE HSPACE="15">滚动字幕左右空白空间为15个像素</MARQUEE>

VSPACE:用于设定滚动字幕上下的空白空间,空白空间用像素表示。此属性不是必须使用的。
例:
<MARQUEE VSPACE="2">滚动字幕上下的空白空间为2个像素</MARQUEE>

LOOP:用于设定滚动字幕的滚动次数。当LOOP的值为"INFINITE"或是"-1"时,则文字会无限制地滚动。此属性不是必须使用的。
例:
<MARQUEE LOOP="-1">文字滚动无数次</MARQUEE>
<MARQUEE LOOP="5">文字滚动5次</MARQUEE>

SCROLLAMOUNT:用于设定每个连续滚动文本后面的间隔,该间隔用像素表示。此属性不是必须使用的。
例:
<MARQUEE SCROLLAMOUNT="10">此文本后面的间隔为10个像素</MARQUEE>

SCROLLDELAY:用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。此属性不是必须使用的。
例:
<MARQUEE SCROLLDELAY="5">此文本两次滚动之间的间隔时间为5毫秒</MARQUEE>

ONMOUSEOUT=this.start() :用来设置鼠标移出该区域时继续滚动
ONMOUSEOVER=this.stop():用来设置鼠标移入该区域时停止滚动

-------------------------------------------------------------

<TABLE height=393 cellSpacing=0 cellPadding=0 width=524 align=center bgColor=#d1f6db border=0><FONT size=4><FONT color=#990033></FONT></FONT>
<TBODY>
<TR><FONT size=4><FONT color=#990033></FONT></FONT>
<TD style="BORDER-RIGHT: 2px solid; PADDING-RIGHT: 1px; BORDER-TOP: 2px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: 2px solid; LINE-HEIGHT: 20px; PADDING-TOP: 1px; BORDER-BOTTOM: 2px solid" borderColor=#99ccff bgColor=#000000 colSpan=2 height=393>
<P style="MARGIN-TOP: -5px; MARGIN-BOTTOM: -5px; LINE-HEIGHT: 100%">
<MARQUEE scrollDelay=100 direction=up height=393><IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756252.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756538.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756304.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756318.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756503.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756827.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756521.jpg"></MARQUEE></P><PRE style="MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; LINE-HEIGHT: 100%"></FONT></PRE></TD></TR></TBODY></TABLE>

------------------------------------------------------------

基本语法 
<marquee> ... </marquee>

文字移动属性的设置
方向
<direction=#> #=left, right <marquee direction=left>从右向左移!</marquee> 
方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee> 
<marquee behavior=slide>只走一次就歇了!</marquee> 
<marquee behavior=alternate>来回走</marquee>
循环
<loop=#> #=次数;若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走
3 趟</marquee>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee> 
<marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>
速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee>
延时
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!
</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦,我会移动耶!</marquee>
</font>
底色
<bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, 
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色!</marquee>
面积
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积!</marquee> 
空白
(Margins)<hspace=# vspace=#> 
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积!</marquee>
<marquee direction=up>我在向上走!</marquee>
<marquee direction=down>我又下向走了</marquee>
补充一个无缝连接的循环滚动
<html>
<head>
</head>
<body>
<TD WIDTH=390 HEIGHT=99><MARQUEE  scrollAmount=4 scrollDelay=0 loop=1 width=390 height=99>
<SCRIPT language=JavaScript>
for(t=1;t<=1000;t++)
document.write("11111111111112222222222222222233333333333333")
 </SCRIPT>
</MARQUEE></TD>
</body>
</html>

另一种实现无缝连接循环滚动得方法
<div style=overflow:hidden;height:100px width:100px>
<div href="#" target="_blank"><img src=" http://www.5dmedia.com/bbs/icon/nudeangel.gif "
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src=" http://www.5dmedia.com/bbs/icon/nudeangel.gif "
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src=" http://www.5dmedia.com/bbs/icon/nudeangel.gif "
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src=" http://www.5dmedia.com/bbs/icon/nudeangel.gif "
width="80" height="80"
border="0"></a>
<a href="#" target="_blank">nudeangel_2</a>
<a href="#" target="_blank">nudeangel_3</a>
<a href="#" target="_blank">nudeangel_4</a>
<a href="#" target="_blank">nudeangel_5</a>
<a href="#" target="_blank">inudeangel_6</a>
<a href="#" target="_blank">nudeangel_7</a>
</div>
<div t=demo.scrollTop
demo2.innerHTML=demo1.innerHTML
function nudeangelMarquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
var repeat=setInterval(nudeangelMarquee,50);
demo.οnmοuseοver=function() {clearInterval(repeat);}
demo.οnmοuseοut=function() {repeat=setInterval(nudeangelMarquee,50);}

-----------------------------------------------------------

<marquee><bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>

最简单的图片移动特效———图片水平向左循环移动
:<marquee>
<img src="http://unibbs.unibbs.com/images/upphoto/647253.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/647264.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/647269.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/647247.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/648164.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648169.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648177.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648182.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648186.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648189.gif">
</marquee>

版权声明:admin 发表于 2023-10-16 18:19:37。
转载请注明:常见的html滚动代码大全 | 站长导航_乐帮资源库

资源标签:

抖音 (1546)   引流 (1522)   AI课程 (524)   电商 (469)   养号 (404)   脚本 (386)   快手 (349)  公众号 (309)   搬运 (303)   视频号 (285)   矩阵 (282)   自媒体 (264)   社群 (256)   直播带货 (217)  闲鱼 (213)  兼职 (185)  宝妈 (172)  无货源 (170)  拼多多 (159)  千川 (157)  无人直播 (148)  视频剪辑 (136)  拉新 (118)  知识付费 (116)  短视频带货 (103)  精准引流 (103)  引流方法 (102)  截流 (101)  信息差 (98)  冷门 (97)  源码 (92)  中视频 (91)  蓝海项目 (88)  虚拟产品 (81)  Chatgpt (77)  创业源码 (75)  挂机 (72)  TikTok (71)  大学生 (69)  实体店 (68)  引流变现 (67)  源码项目 (55)  精选源码 (54)  站长源码 (54)   创业粉 (53)   男粉 (53)   副业兼职项目 (48)   百家号 (47)   互联网兼职 (46)   虚拟项目 (46)   长期项目 (42)   书单号 (37)   小游戏 (36)   无脑操作 (36)   社群运营 (36)   微头条 (35)   跨境电商 (35)   高利润 (34)   美团 (33)   图文带货 (33)   小吃教程 (33)   淘系 (32)   知乎引流 (30)   小红书 (30)   美女号 (29)   风口项目 (26)   数字人 (25)    项目拆解 (23)   私域变现 (23)   宝妈粉 (22)   电子书 (22)   同城流量 (22)   多多视频 (22)   无脑搬运 (20)   自动挂机 (19)   男粉项目 (19)   抖音小程序 (19)   美女视频 (19)   暴力引流 (18)    黄岛主 (18)闲鱼引流 (18)   挂机项目 (18)   玄学 (17)   自动引流 (16)   微信小程序 (15)   抖音项目 (14)   国学 (14)   AI项目 (13)   抖音橱窗 (12)   学习资料 (12)   AI绘图 (11)   蟹老板 (10)   同城账号 (10)   小红书项目 (9)   长久项目 (9)   陌陌 (9)   微博引流 (9)   微信群引流(8)   B站引流 (7)   站长赚钱 (6)

资源站长招募

暂无评论

暂无评论...