滚动网页设计_网页设计文字滚动（水平）代码

1、如何制作网页滚动文字

4.3.1 设置文字滚动

HTML技术中使文字滚动的方法是使用双标签<marquee></marquee>。在HTML代码中可使其作用区文字滚动，默认为从右到左，循环滚动。在D:web目录下创建网页文件，命名为mar.htm，编写代码如代码4.15所示。

代码4.15 文字滚动的设置：mar.htm

<html>
<head>

<title>文字滚动的设置</title>
</head>
<body>

<font size="5" color="#cc0000">

文字滚动示例（默认）：<marquee>做人要厚道</marquee>
</font>

</body>
</html>

图4.15 设置文字滚动默认形式
从图4.15可得，在未设置宽度时，<marquee></marquee>标签是独占一行的。

4.3.2 设置文字滚动的方向

<marquee></marquee>标签的direction属性用于设置内容滚动方向，属性值有left、right、up、down，分别代表向左、向右、向上、向下，例如以下代码：

<marquee direction="left">做人要厚道</marquee>
<marquee
direction="right">做人要厚道</marquee>
<marquee
direction="up">做人要厚道</marquee>
<marquee
direction="down">做人要厚道</marquee>
4.3.3
设置文字滚动的速度和形式
设置文字滚动使用<marquee></marquee>标签，其属性说明如下。

— <marquee></marquee>标签的scrollamount属性用于设置内容滚动速度。
—
<marquee></marquee>标签的behavior
属性用于设置内容滚动方式，默认为scroll，即循环滚动，当其值为alternate时，内容将来回循环滚动。当其值为slide时，内容滚动一次即停止，不会循环。还有一个loop属性可设置其滚动循环次数，默认为没有限制。

— <marquee></marquee>标签的scrolldelay属性用于设置内容滚动的时间间隔。
—
<marquee></marquee>标签的bgcolor属性用于设置内容滚动背景色（类似于body的背景色设置）。
—
<marquee></marquee>标签的width 属性用于设置内容滚动背景宽度。
—
<marquee></marquee>标签的height属性用于设置内容滚动背景高度。

修改mar.htm网页文件，编写代码如代码4.16所示。

代码4.16 文字滚动的设置：mar.htm

<html>
<head>
<title>文字滚动的设置</title>

</head>
<body>
<font size="3" color="#cc0000">

文字滚动示例（默认）：<marquee>做人要厚道</marquee>
文字滚动示例（向右）：<marquee
direction="right" scrolldelay="500">做人要厚道</marquee>

文字滚动示例（向下，滚动方式为slide，速度为10）：<marquee scrollamount="10"
behavior="slide">做人要厚道</marquee>

文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：<marquee scrollamount="2"
behavior="alternate" loop="3">做人要厚道</marquee>

文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：<marquee direction="up"
bgcolor="#CCFF66" width="250" height="55">做人要厚道</marquee>

</font>
</body>
</html>

在浏览器地址栏输入http://localhost/mar.htm，浏览效果如图4.16所示。

图4.16 文字滚动的不同形式

<marquee></marquee>的众多属性能非常方便地制作滚动文字，在后面的JavaScript学习中，读者将继续深化<marquee></marquee>标签的动态行为学习。

2、网页设计文字滚动（水平）代码

网页设计文字滚动（水平）代码是：

<marquee direction=up scrollamount=1 scrolldelay=100

height=60>

<tr>

<td>

共和国

</table>

</marquee>

(2)滚动网页设计扩展资料：

一、除此之外，marquee参数有以下：

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

Direction：滚动方向设置，可选择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：前后、上下的空行。

二、滚动字幕在FrontPage的组件里有，但是FrontPage这个软件只能支持单行文字，一出现多行文字它就无能为力了，而且它只能支持一行滚动。（如果出现只能滚动一行的情况，解决办法是把这段代码嵌入到JavaScript的document.write里面。）

3、网页设计中怎么在页面中设置一个滚动条

css属性 overflow-y:auto; DIV里面的内容超过DIV的高度，右边就会自动出现滚动条

1、用一个div，定制成图中的宽度和高度
2、然后再把div的样式设成overflow-y:scroll，当div里的文字超出那个高度的时候，滚动条就出来了。
例如：<div style="width:100px; height:100px; overflow:auto; border:1px solid #000000;"><img src="" style="width:300px; height:300px;"></div>

4、网页设计那个滚动字幕怎么做

5、什么是网页设计中的滚动设计？如何进行滚动设计？

曾经的网站设计“禁忌”已经成为最受欢迎的技术之一，下面将讨论一些滚动设计的利弊，并分析一些技巧。

滚动设计适合你的产品吗？

每一种设计技巧和工具，都有喜欢这个概念的人和那些讨厌它的人。在大多数情况下，任何一方都不是本质上对错的；因此，在处理此类项目之前，权衡所有注意事项非常重要。

滚动的优点：

鼓励互动 – 随着不断变化的元素不断刺激，它可以是一种有趣的讲故事方法，鼓励用户交互 - 尤其是高雅执行的视差滚动。

更快 – 长滚动比单击复杂的导航路径更快，并且不会减慢或限制用户体验。如Interaction Design Best Practices中所述，对时间的感知通常比实际时间的流逝更重要。

吸引用户 – 易用性可促进交互性，增加现场时间。对于无限滚动网站尤其如此，您可以在其中帮助用户发现他们可能甚至没有想到的相关内容。

响应式设计 – 页面设计在具有不同屏幕大小和功能的设备之间可能会变得复杂，但滚动有助于简化差异。

手势控制 – 滚动似乎与触摸有着有机的联系，因为向下轻扫比在屏幕上不同区域重复点击要自然得多。用户（尤其是移动设备）通常接受这一方式来显示信息。

令人愉快的设计 – 不需要多次单击即可获得更快的交互，从而获得更类似于应用或游戏的用户体验。

滚动的缺点

固执用户 –一些用户总是毫无理由地去抵制改变。尽管如此，该技术现在非常普遍（特别是在移动体验期间），可以说大多数用户都习惯了这种技术。

SEO缺点 - 只有一个页面可能对网站的SEO产生负面影响。

迷失方向 - 滚动和内容之间的断开可能会使用户感到困惑或脱节。

导航困难 – "返回"页面上的先前内容可能会很尴尬。为了对付这种情况，您可以创建一个持久的顶部导航，其中每个部分都锚定到页面。

网站速度 – 视频或图像图库等大量内容可能会降低网站速度，尤其是视差滚动网站，它们依赖于 Javascript 和 jQuery

没有页脚 – 使用无限滚动网站，我们建议使用简约的"粘性"页脚，这样您就不会牺牲可导航性。否则，用户可能会因为页面底部缺少进一步的导航而感到困惑。

撇开优点和缺点不谈，某些类型的网站更适合长滚动设计。更长的滚动网站更适合……

...包含很大一部分移动流量（大多数用户）

...包括频繁更新或新内容（如博客）

...有很多信息以单一的方式呈现，以便理解（如信息图）

...不包含富媒体，因为这可能导致负载时间的消耗

滚动最佳实践

长滚动、视差效应和类似机制在设计领域中仍然比较新（约4年历史），但仍从试错经验中可以获取一些基本的最佳实践。

从 2015 和 2016 的 Web 设计趋势总结，以下是成功实现长滚动的一些日常技巧。

不用担心短滚动和长滚动交替使用。让内容决定滚动长度，而不是反过来。使用短滚动主页和长滚动着陆页（如产品，旅游等）非常好（并且非常受欢迎）。

考虑粘性导航，以便用户始终可以快速"返回"或从滚动中的元素跳转到另一个元素。

将滚动与设计元素或工具结合，以便每个用户都能快速了解网站的工作方式。箭头、动画按钮或类似的用户界面工具是帮助用户确定下一步操作的有趣且简单的方法。有些网站甚至包含一个小按钮，其中包含"滚动更多"或"开始"等说明，来提高页面的导航性。

明确区分滚动点击和其他CTA元素，以便网站获得所需的交互。

做一些研究，看看用户如何与滚动交互。例如，在 Google 分析中，可以打开"网页分析"选项卡，查看屏幕下方（第二屏及之后）用户的点击数。然后，你可以根据需要调整设计。

不要过分。长滚动并不意味着 500 页的连续内容 - 长滚动也可以很简单。讲述你的故事，然后适可而止，不要喋喋不休。

专注于用户目标，并接受即使是无限滚动网站也不是真正无穷无尽的。创建长滚动网站时，要了解用户仍需要方向感（当前位置）和导航（其他可能的路径）。

包括有助于在滚动中定位用户的视觉提示，例如左下方用于“七种类型的摩托车骑手”站点的头盔图标。

滚动可能是一把双刃剑，所以坚持使用它的建议用法，以避免它弊大于利。

平时用墨刀设计原型时候，可以直接拖动，增加页面长度，进行滚动设计。

6、网页设计字体滚动代码？

文字滚动是由<marquee></marquee>控制的。marquee的参数如下：

1、方向 <direction=#> #=left, right
如：<marquee direction=left>啦啦啦，我从右向左移！</marquee>
<marquee direction=right>啦啦啦，我从左向右移！</marquee>

2、方式 <bihavior=#> #=scroll, slide, alternate
如：<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee>
<marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee>
<marquee behavior=alternate>啦啦啦，我来回走耶！</marquee>

3、循环 <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>

4、速度 <scrollamount=#>
如：<marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>

5、延时 <scrolldelay=#>
如： <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

6、对齐方式(Align) <align=#> #=top, middle, bottom
如：<font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
7、底色 <bgcolor=#>
#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

如：<marquee bgcolor=aaaaee>啦啦啦，我会移动耶！</marquee>

8、面积 <height=# width=#>
如：<marquee height=40 width=50% bgcolor=aaeeaa> 啦啦啦，我会移动耶！</marquee>

9、空白(Margins)<hspace=# vspace=#>

<marquee id="scrollarea" direction="up" scrolldelay="10" scrollamount="1" width="150" height="80" onmouseover="this.stop();" onmouseout="this.start();">
------------------------------------------------------------------------------------------------------------------------------

<marquee></marquee>

以下是一个最简单的例子：

代码如下:

<marquee><font size=+3 color=red>Hello, World</font></marquee>

下面这两个事件经常用到：

onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动

onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动

代码如下:

<marquee >onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动：用来设置鼠标移入该区域时停止滚动</marquee>

这是一个完整的例子：

代码如下:

<marquee align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" >

这是一个完整的例子

</marquee>

该标签支持的属性多达11个：

align

设定<marquee>标签内容的对齐方式

absbottom：绝对底部对齐（与g、p等字母的最下端对齐）

absmiddle：绝对中央对齐

baseline：底线对齐

bottom：底部对齐（默认）

left：左对齐

middle：中间对齐

right：右对齐

texttop：顶线对齐

top：顶部对齐

7、DW网页设计中如何给整个网页设置滚动条？

8、制作网页中的滚动图片，怎样循环播放。

1.打开Dreamweaver创建新页面，如图：

2.插入如下代码，如图：

<%
set rs3=server.CreateObject("ADODB.RecordSet")
rs3.Source ="select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"
rs3.Open rs3.Source,conn,3,3
if not rs3.EOF Then
%>
<div align='center' id='demo' style='overflow:hidden;height:125px;width:990px;'>
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
<td id='demo1' valign='top'>
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<%
while not rs3.EOF
fileExt=lcase(getFileExtName(rs3("picname")))
%>
<td align='center'>
<TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0>
<TR>
<TD width=8 rowspan=3 > </TD>
<TD vAlign=top width=8><img src='Images/bg_0ltop.gif' width=10 height=10></TD>
<TD background=images/bg_01.gif></TD>
<TD vAlign=top width=7><img src='Images/bg_0rtop.gif' width=10 height=10></TD>
<TD width=7 rowspan=3 vAlign=top> </TD>
</TR>
<TR>
<TD background='Images/bg_03.gif'> </TD>
<TD align="center" bgcolor="#E9E9E9">
<%if fileext="jpg" or fileext="bmp" or fileext="png" or fileext="gif" then%>
<table style="TABLE-LAYOUT: fixed" height=80 cellSpacing=0 cellPadding=0 width=105 border=0>
<tr>
<td style="HEIGHT: 80px">
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><img src='<%=FileUploadPath & rs3("picname")%>' width='105' border=0></a>
</td>
</tr>
</table>
<%else if fileext="swf" then%>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width='105' height='80'>
<param name=movie value='<%=FileUploadPath & rs3("picname")%>'>
<param name=quality value=high>
<param name='Play' value='-1'>
<param name='Loop' value='0'>
<param name='Menu' value='-1'>
<param name='wmode' value='transparent'>
<embed src='<%=FileUploadPath & rs3("picname")%>' width='105' height='80' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash'></embed>
</object>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'></a>
<%
end if
end If
%>
</TD>
<TD background='Images/bg_04.gif'> </TD>
</TR>
<TR>
<TD><img src='Images/bg_0lbottom.gif' width=10 height=10></TD>
<TD><img src='Images/bg_02.gif'></TD>
<TD><img src='Images/bg_0rbottom.gif' width=10 height=10></TD>
</TR>
<TR>
<TD> </TD>
<TD colspan=3 align=center height=20 valign='top' background='Images/bg_05.gif'>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><%=CutStr(htmlencode4(rs3("title")),14)%></a>
</TD>
<TD> </TD>
</TR>
</TABLE>
</td>
<%
rs3.MoveNext
wend
%>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<%if top_img >4 then%>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script>
<%
end if
else
Response.Write "暂无最新图文"
end if
rs3.close
set rs3=nothing
%>

3.编写完成代码后查看预览效果图，如下：

注意事项:代码中select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"根据网站的数据库路径来定义数据表，包括ID编号的降序和顺序。

9、如何在网页制作中将图片设置为滚动

1、素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的；