滚动代码大全HTML

合集下载

html滚动字幕制作滚动字幕效果参数

html滚动字幕制作滚动字幕效果参数制作滚动字幕效果：marquee标签如下:＜MARQUEE direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=4＞＜/marquee＞参数说明：direction滚动方向：up向上滚动，down向下滚动，left向左滚动，right向右滚动behavior滚动方式：scroll绕来绕去，slide滚动一次就停下来，alternate来回滚动scrollAmount滚动速度：数值越大滚动越快scrollDelay滚动延迟：数值越大延迟时间越长loop循环次数：循环几次bgcolor背景颜色height高度width宽度onmouseout=start() onmouseover=stop()鼠标悬停停止，离开继续滚动移动方式可以系属性果度改...下上左右都得...滚动字幕的使用可以增加网页的动感，让网页显得更有生气。

当然用javascript可以实现滚动字幕效果；使用Dreamweaver的图层再用其时间轴功能可以做出非常漂亮的滚动看板。

但相对而言，用HTML的<marquee>滚动字幕标记所需的代码最少，虽然效果不是最好，但确实能够以较少的下载时间换来较好的效果。

滚动条代码大全

滚动条代码⼤全1、控制横向和纵向滚动条的显隐去掉滚动条 x 轴<body style="overflow-y:hidden">去掉滚动条 y 轴<body style="overflow-x:hidden">滚动条 x/y 轴全部去掉<body scroll="no">2、滚动条颜⾊<style>BODY{SCROLLBAR-FACE-COLOR: #ffffff;SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;SCROLLBAR-SHADOW-COLOR: #ffffff;SCROLLBAR-3DLIGHT-COLOR: #ffffff;SCROLLBAR-ARROW-COLOR: #ffffff;SCROLLBAR-TRACK-COLOR: #eeeeee;SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;}</style>代码说明：SCROLLBAR-FACE-COLOR 滚动条凸出部分的颜⾊SCROLLBAR-HIGHLIGHT-COLOR 滚动条空⽩部分的颜⾊SCROLLBAR-SHADOW-COLOR ⽴体滚动条阴影的颜⾊SCROLLBAR-3DLIGHT-COLOR 滚动条亮边的颜⾊SCROLLBAR-ARROW-COLOR 上下按钮上三⾓箭头的颜⾊SCROLLBAR-TRACK-COLOR 滚动条的背景颜⾊SCROLLBAR-DARKSHADOW-COLOR 滚动条强阴影的颜⾊SCROLLBAR-BASE-COLOR 滚动条的基本颜⾊3、箭⾏符号滚动条代码<style type="text/css"></style>4、⼀侧滚动条代码<style type="text/css"></style>5、朴素型滚动条代码<style type="text/css"></style>6、⼀侧滚动条代码<style type="text/css"></style>7、⽴体型滚动条代码<style type="text/css"></style>。

滚动文字、图片等html代码详解

d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)
3.实例：
a)如何给滚动字幕加超链接？这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果，代码是<marquee scrollAmount=2 width=300><a href=>中央电视台</a></marquee>，点击中央电视台就可以进入了：
?注意：如果你的网页经过了FrontPage编辑，保存之后，只能滚动一行，这时候你发现你原来的代码顺序已经变了，My god！解决的办法是，找出原来的代码，把它嵌入到JavaScript的document.write中即可，上述代码写为：
<script>document.write('<marquee scrollAmount=2 width=300 height=160 direction=up>?早晨好啊！<br>?空气好清新啊<br>?今朝食乜好呢？<p>?<a href=>中央电视台</a></marquee>')</script>
5.如何给滚动图片加超链接？
用<a href="/>";和</a>把<img>包围，并且img必须设border=0，否则图片会出现边框。4个图片带连接，在新窗口中打开中秋节贺卡的例子如：

HTML滚动代码大全

HTML滚动代码大全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进制值的格式或颜色名称来设定。

滚动代码

<a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
<a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>

文字的滚动特效代码

文字的滚动特效代码文字的滚动特效代码文章来源：倾颜戏羽文本编辑：倾颜戏羽日志标签：博客教程 <MARQUEE>普通卷动<MARQUEE>向右滚动特效代码：<MARQUEEdirection=right>向右滚动</MARQUEE><MARQUEE behavior=alternate>来回卷动</MARQUEE>向上滚动特效代码：<MARQUEE direction=up>向上卷动</MARQUEE>向下滚动特效代码：<MARQUEE direction=down>向下卷动</MARQUEE>预设滚动次数特效代码：（loop=2 表示设定滚动两次就停，参数可以随意设定）<MARQUEE loop=2>预设滚动次数</MARQUEE>设定滚动宽度特效代码：（width=200表示设定滚动宽度参数为200，宽度参数可以自己设定）<MARQUEE width=200>设定滚动宽度</MARQUEE>设定滚动高度特效代码：（height=30 表示设定滚动高度参数为30，高度参数可以自己设定）<MARQUEE height=30>设定滚动高度</MARQUEE>设定滚动背景颜色特效代码：（bgColor=#003366表示设定滚动背景颜色颜色码：003366）<MARQUEE bgColor=#003366>设定滚动背景颜色</MARQUEE>设定滚动速度特效代码：（scrollAmount=38参数越大滚动速度越快）<MARQUEE scrollAmount=38>设定滚动速度</MARQUEE>设定滚动延迟时间特效代码：（scrollDelay=300 参数越大延迟时间越久）<MARQUEE scrollDelay=300>设定滚动延迟时间</MARQUEE>滚动链接特效代码：（“链接地址”表示此处粘贴要链接的网站地址、“链接名称”表示此处填写链接的对象名称）<MARQUEE scrollAmount=2 width=200 height=30><A href="链接地址" target=_blank>链接名称</A></MARQUEE>各参数详解：看右边=》1).scrollAmount。

纯html版+jq版文字滚动效果

1、纯html版[html] view plaincopyprint?<marquee style="HEIGHT: 30px" scrollamount="2" direction="up" onmouseover=stop() onmous eout=start()><pre name="code" class="html"><p>第一行</p><p>第二行</p><p>第三行</p><p>第四行</p></marquee>ps: scrollamount:表示移动速度direction：表示移动方向onmouseoveer：鼠标放上动作2、jq版滚动[html] view plaincopyprint?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/T R/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>单行和多行上下无缝滚动代码</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body{font-size:0.8em;letter-spacing:1px;line-height:1.8em;}div,h2,p,ul,li{margin:0;padding:0;}h1{font-size:1em;font-weight:normal;}h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none;}h1 a:hover{background:#a40000;color:#fff;text-decoration:underline;}h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative;}h2{background:#a40000;font-size:12px;color:#fff;font-weight:normal;text-align:center;width :100px;height:25px;line-height:25px;margin:0 0 0 20px;}ul.line,ul.mulitline{width:500px;height:30px;background:#eee;overflow:hidden;margin-botto m:20px;border:2px solid #a40000;}ul.mulitline{height:90px;}li{height:30px;text-indent:15px;font-size:12px;line-height:30px;list-style:none;}</style><script language="javascript" src="jquery1.3.2.js"></script><script language="javascript">$(function(){//单行应用@Mr.Thinkvar _wrap=$('ul.line');//定义滚动区域var _interval=2000;//定义滚动间隙时间var _moving;//需要清除的动画_wrap.hover(function(){clearInterval(_moving);//当鼠标在滚动区域中时，停止滚动},function(){_moving=setInterval(function(){var _field=_wrap.find('li:first');//此变量不可放置于函数起始处，li:first取值是变化的var _h=_field.height();//取得每次滚动高度_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值，隐藏第一行_field.css('marginTop',0).appendTo(_wrap);//隐藏后，将该行的margin值置零，并插入到最后，实现无缝滚动})},_interval)//滚动间隔时间取决于_interval}).trigger('mouseleave');//函数载入时，模拟执行mouseleave，即自动滚动});$(function(){//多行应用@Mr.Thinkvar _wrap=$('ul.mulitline');//定义滚动区域var _interval=3000;//定义滚动间隙时间var _moving;//需要清除的动画_wrap.hover(function(){clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动},function(){_moving=setInterval(function(){var _field=_wrap.find('li:first');//此变量不可放置于函数起始处，li:first取值是变化的var _h=_field.height();//取得每次滚动高度_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值，隐藏第一行_field.css('marginTop',0).appendTo(_wrap);//隐藏后，将该行的margin值置零，并插入到最后，实现无缝滚动})},_interval)//滚动间隔时间取决于_interval}).trigger('mouseleave');//函数载入时，模拟执行mouseleave，即自动滚动});</script></head><body><h2>单行应用</h2><ul class="line"><li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="#">简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li><li><a title="getElementsByTagName的简写方式" href="#">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li><li><a title="一个简单的鼠标划过切换效果" href="#">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="#">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li><li><a title="一个简单的纵横向动画效果类" href="#">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="#">document.getElementById的简写方式</a> 2010年04月18日 (1)</li><li><a title="两种简单实现菜单高亮显示的JS类" href="#">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li></ul><h2>多行应用</h2><ul class="mulitline"><li><a title="一个简单的鼠标划过切换效果" href="#">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="#">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li><li><a title="getElementsByTagName的简写方式" href="#">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li><li><a title="两种简单实现菜单高亮显示的JS类" href="#">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li><li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="#">简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li><li><a title="一个简单的纵横向动画效果类" href="#">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="#">document.getElementById的简写方式</a> 2010年04月18日 (1)</li></ul></body></html>。

滚动文字代码(全)【汇编】

1. 文字来回滚动：代码：<MARQUEE scrollAmount=3 behavior=alternate>文字来回滚动</MARQUEE>2. 向右移动的竖排文字：代码：<MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=3scrollDelay=0 direction=up width=200 height=150><P align=left>向右移动的竖排文字</SPAN><BR>向右移动的竖排文字<BR> 向右移动的竖排文字<BR>向右移动的竖排文字</P></MARQUEE>3. 向上移动的文字：代码：<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=3 direction=up>向上移动的文字<BR>向上移动的文字</MARQUEE>4. 向下移动的文字：代码：<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=3 dir ection=down>向下移动的文字<BR>向下移动的文字</MARQUEE>5. 从右向左滚动：代码：<MARQUEE scrollAmount=2>从右向左滚动</MARQUEE>6. 从左向右滚动：代码：<MARQUEE scrollAmount=2 direction=right>从左向右滚动</MARQUEE>7. 上下反弹：代码：<MARQUEE style="WIDTH: 708px; HEIGHT: 150px" scrollAmount=2 direction=upbehavior=alternate>上下反弹</MARQUEE>8. 从左向右文字波浪式移动：代码：<MARQUEE style="WIDTH: 80%; HEIGHT: 100px" scrollAmount=2 direction=upbehavior=alternate width="80%"><MARQUEE direction=right>从左向右文字波浪式移动</MARQUEE></MARQUEE>9. 文字来回波浪式移动：代码：<MARQUEE style="WIDTH: 80%; HEIGHT: 100px" scrollAmount=2 direction=upbehavior=alternate width="80%"><MARQUEE direction=right behavior=alternate>文字来回波浪式移动</MARQUEE></MARQUEE>10. 躲躲字，跑给你追：代码：<MARQUEE behavior=alternate><MARQUEE scrollAmount=5 width=150>躲躲字，跑给你追</MARQUEE></MARQUEE>11. 原地跳动的文字：代码：<MARQUEE direction=up behavior=alternate width=60 height=120>祝</MARQUEE> <MARQUEE direction=up behavior=alternate width=60 height=80>大</MARQUEE><MARQUEE direction=up behavior=alternate width=60 height=120>家</MARQUEE> <MARQUEE direction=up behavior=alternate width=60 height=80>永</MARQUEE><MARQUEE direction=up behavior=alternate width=60 height=120>远</MARQUEE> <MARQUEE direction=up behavior=alternate width=60 height=80>幸</MARQUEE> <MARQUEE direction=up behavior=alternate width=60 height=120>福</MARQUEE>12. 波浪字：代码：<MARQUEE style="FILTER: wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"scrollAmount=2 scrollDelay=65 direction=up behavior=alternate height=80><CENTER>波浪字<BR>波浪字</CENTER></MARQUEE>13. 由中间向两边移动的文字：代码：<P align=center><MARQUEE width=200 height=50><FONT face=华文彩云color=#ee110e size=5>闲人SGM欢迎您</FONT></MARQUEE><MARQUEE direction=right width=200 height=50><FONT face=华文彩云color=#ee110esize=5>闲人SGM欢迎您</FONT></MARQUEE></P>14. 由上下向中间移动的字体：代码：<CENTER><MARQUEE style="WIDTH: 300px; HEIGHT: 60px" scrollAmount=2 direction=downheight=60><FONT face=隶书color=#ff0000 size=5>闲人SGM欢迎您</FONT></MARQUEE></CENTER><CENTER><MARQUEE style="WIDTH: 300px; HEIGHT: 60px" scrollAmount=2 direction=upheight=60><FONT face=隶书color=#ff0000 size=5>闲人SGM欢迎您</FONT></MARQUEE></CENTER>15. 左右运动的文字：代码：<CENTER><MARQUEE direction=right width=250 height=50><FONT color=#ff0000 size=5>闲人SGM欢迎您</FONT></MARQUEE><BR><MARQUEE width=250 height=50><FONT face=隶书color=#ff0000 size=5>闲人SGM欢迎您</FONT></MARQUEE></CENTER>注: 各参数详解a)scrollAmount。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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;
<a href="#" target="_blank"><img src="4.jpg" width="80" height="80" border="0"></a>
<a href="#" target="_blank">nudeangel_2</a>
<a href="#" target="_blank">nudeangel_3</a>
<IMG src="3.jpg">
<IMG src="4.jpg">
<IMG src="5.jpg">
<IMG src="6.jpg">
<IMG src="7.jpg">
</MARQUEE>
</P><PRE
style="MARGIN-TOP:
0px;
MARGIN-BOTTOM:
0px;
LINE-HEIGHT:
BEHAVIOR：可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是 SLIDE，那么文本就移动到文档上，并停留在页边距上。如果设定为 ALTERNATE，则文本从一边移动到另一边。如果设定为 SCROLL，文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有：SILIDE，ALTERNATE， SCROLL。
<SCRIPT language=JavaScript> for(t=1;t<=1000;t++) document.write("11111111111112222222222222222233333333333333")
</SCRIPT>
</body> </html>
</MARQUEE></TD>
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>
速度 <scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>
延时 <scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！ </marquee>
VSPACE：用于设定滚动字幕上下的空白空间，空白空间用像素表示。此属性不是必须使用的。例： <MARQUEE VSPACE="2">滚动字幕上下的空白空间为 2 个像素</MARQUEE>
LOOP：用于设定滚动字幕的滚动次数。当 LOOP 的值为"INFINITE"或是"-1"时，则文字会无限制地滚动。此属性不是必须使用的。
外观(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>
DIRECTION：用于设定文本滚动的方向，可以设定的值有：LEFT，RIGHT。此属性不是必须使用的。例：
<MARQUEE DIRECTION="LEFT">文字向左边滚动</MARQUEE> <MARQUEE DIRECTION="RIGHT">文字向右边滚动</MARQUEE>
HEIGHT：用于设定滚动字幕的高度，高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。例： <MARQUEE HEIGHT="10%">滚动字幕的高度是可视页面的 10%</MARQUEE> <MARQUEE HEIGHT="12">滚动字幕的高度是 12 像素</MARQUEE>
另一种实现无缝连接循环滚动得方法
<div style=overflow:hidden;height:100px width:100px> <div href="#" target="_blank"> <img src="1.jpg" width="80" height="80" border="0"></a>
WIDTH：用于设定字幕的宽度，宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。例： <MARQUEE WIDTH="90%">滚动字幕的宽度是可视页面的 90%</MARQUEE> <MARQUEE WIDTH="200">滚动字幕的宽度是 200 像素</MARQUEE>
HSPACE：用于设定滚动字幕左右的空白空间，空白空间用像素表示。此属性不是必须使用的。例： <MARQUEE HSPACE="15">滚动字幕左右空白空间为 15 个像素</MARQUEE>
ONMOUSEOUT=this.start() ONMOUSEOVER=this.stop()
>… </MARQUEE>
属性： ALIGN：用于按设定的值对齐滚动的文本。ALIGN 可以设定的值有：LEFT，CENTER，RIGHT，TOP， BOTTOM。此属性不是必须使用的。例： <MARQUEE ALIGN="TOP">这段滚动文字设定为上对齐</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=390lt;/FONT></PRE></TD></TR></TBODY></TABLE>
------------------------------------------------------------
基本语法 <marquee> ... </marquee>
文字移动属性的设置方向 <direction=#> #=left, right <marquee direction=left>从右向左移！</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>
<P style="MARGIN-TOP: -5px; MARGIN-BOTTOM: -5px; LINE-HEIGHT: 100%">
<MARQUEE scrollDelay=100 direction=up height=393>
<IMG src="1.jpg">
<IMG src="2.jpg">