网页制作图片滚动

marqueedirection=upheight=75onMouseOut=this.start()onMouseOver=this.stop()scrollamount=1scrolldelay=100width="180"id=MARQUEE1滚动内容/marquee

Direction参数可设置:updownleftright(控制滚动方向)

Scrolldelay=100(100就是速度，值越大滚动越快……)

onMouseOut=this.start()........鼠标移出状态滚动

onMouseOver=this.stop().........鼠标经过时停止滚动

基本语法

marquee.../marquee

移动属性的设置,这种移动不仅仅局限于文字，也可以应用于图片，表格等等

方向

direction=##=left,right,up,downmarqueedirection=left从右向左移！/marquee

方式

bihavior=##=scroll,slide,alternatemarqueebehavior=scroll一圈一圈绕着走！/marquee

marqueebehavior=slide只走一次就歇了！/marquee

marqueebehavior=alternate来回走/marquee

循环

loop=##=次数；若未指定则循环不止(infinite)marqueeloop=3width=50%behavior=scroll只走3趟/marqueeP

marqueeloop=3width=50%behavior=slide只走3趟/marquee

marqueeloop=3width=50%behavior=alternate只走3趟！/marquee

速度

scrollamount=#marqueescrollamount=20啦啦啦，我走得好快哟！/marquee

延时

scrolldelay=#marqueescrolldelay=500scrollamount=100啦啦啦，我走一步，停一停！/marquee

外观(Layout)设置

对齐方式(Align)

align=##=top,middle,bottomfontsize=6

marqueealign=#width=400啦啦啦，我会移动耶！/marquee

/font

底色

bgcolor=##=rrggbb16进制数码，或者是下列预定义色彩：

Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,

Fuchsia,White,Green,Purple,Silver,Yellow,Aquamarqueebgcolor=aaaaee颜色！/marquee

面积

height=#width=#marqueeheight=40width=50%bgcolor=aaeeaa面积！/marquee

空白

(Margins)hspace=#vspace=#

marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle面积！/marquee

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

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

marquee direction=up scrollamount=1 scrolldelay=100

height=60

!-- head_scrolltext --

tr

td

共和国

/table !-- end head_scrolltext --

/marquee

扩展资料：

一、除此之外，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里面。）

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

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

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

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

滚动的优点：

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

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

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

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

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

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

滚动的缺点

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

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

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

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

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

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

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

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

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

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

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

滚动最佳实践

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

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

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

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

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

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

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

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

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

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

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

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

网页设计如何设置网页部分内容不随着滚动条而移动移动？

div的样式中使用相当于浏览器窗口定位——position:fixed。\x0d\x0a一、position:fixed属性的含义\x0d\x0afixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。\x0d\x0a我们平时所说的固定定位指的就是fixed，设置了固定定位的元素不会随滚动条上下滚动。\x0d\x0a\x0d\x0a二、一般的 position:fixed; 实现方法\x0d\x0a#top{position:fixed;bottom:0;right:20px}\x0d\x0a实现了id为top的元素固定在浏览器的底部和距离右边20个像素的位置\x0d\x0a#top{position:fixed;top:20px;right:20px}\x0d\x0a实现了id为top的元素固定在距离浏览器的顶部20个像素和距离右边20个像素的位置\x0d\x0a\x0d\x0a三、IE6下position:fixed; 实现方法\x0d\x0a在IE6中是不能直接使用 position:fixed; 。你需要一些 CSS Hack 来解决它\x0d\x0a相同的还是让 ... 元素固定在浏览器的底部和距离右边的20个像素，这次的代码是：#top{\x0d\x0aposition:fixed;\x0d\x0abottom:0;\x0d\x0aright:20px;\x0d\x0a_position:absolute;\x0d\x0a\x0d\x0a_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));\x0d\x0a}\x0d\x0aright 跟 left 属性可以用绝对定位的办法解决，而 top 跟 bottom 就需要用上面的表达式来实现。其中在_position:absolute; 中的 _ 符号只有 IE6 才能识别，目的是为了区分其他浏览器\x0d\x0a\x0d\x0a1、使元素固定在浏览器窗口的顶部：\x0d\x0a#top{\x0d\x0a_position:absolute;\x0d\x0a_top:expression(eval(document.documentElement.scrollTop));\x0d\x0a}\x0d\x0a2、使元素固定距浏览器窗口的顶部a像素的位置：\x0d\x0a#top{\x0d\x0a_position:absolute;\x0d\x0a_top:expression(eval(document.documentElement.scrollTop));\x0d\x0a_margin-top:a;\x0d\x0a}或者\x0d\x0a#top{\x0d\x0a_position:absolute;\x0d\x0a_top:expression(eval(document.documentElement.scrollTop+a));\x0d\x0a}\x0d\x0a3、使元素固定在浏览器窗口的底部：\x0d\x0a#top{\x0d\x0a_position:absolute;\x0d\x0a_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));\x0d\x0a}\x0d\x0a4、使元素固定在距浏览器窗口的底部b像素的位置：\x0d\x0a#top{\x0d\x0a_position:absolute;\x0d\x0a_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));\x0d\x0a_margin-bottom:b;\x0d\x0a}或者\x0d\x0a#top{\x0d\x0a_position:absolute;\x0d\x0a_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||b)-(parseInt(this.currentStyle.marginBottom,10)||b)));\x0d\x0a}\x0d\x0a四、IE6下的闪动问题\x0d\x0a问题还没有完全解决。在用了上面的办法后，你会发现：被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入：\x0d\x0a*html{background-image:url(about:blank);background-attachment:fixed;}\x0d\x0a其中 * html选择器hack是给 IE6 识别的。\x0d\x0a到此，IE6 的 position:fixed; 问题已经被解决了

回答于 2022-11-16

长滚动网页页面设计技巧

长滚动页面和无限滚动式的网页已经彻底流行开来了，甚至可以说它已经脱离趋势，成为了一种常规的设计，它们的流行并不是巧合。当用户向下滚动的时候页面的时候，所需要的内容与信息会自然的呈现出来，在此过程中通常不会涉及到额外的、多余的交互，关于长滚动网页设计，今天我们一起来了解一下吧!

长滚动式的页面有着如下的优势：

1、为精简的导航

2、易呈现故事，拥有吸引用户的潜质

3、移动端设备的良好兼容性

长滚动页面的流行和移动端设备的广泛普及有着直接的因果关系：

屏幕越小，相同内容所需要展现的页面就越长。

移动端设备目前几乎全都是使用触摸屏，交互方式也是以触摸和手势为主。当然，长滚动式页面并非没有缺点，但是接下来的案例和最佳实践，将会帮你在设计长滚动页面的时候，尽量满足用户的`期望。

一、使用视觉线索

通过视觉线索的暗示，让用户明白绝大多数的内容都位于首屏。

作为一个长滚动页面，想要让用户快速的明白它的运作方式，应该合理地运用元素来呈现它的原理。诸如向下的箭头或者“向下滚动”的文本都是可用性良好的视觉线索，告知用户只需要向下滚动便可。

向下的箭头在向用户暗示，绝大多数的内容都在下方。

二、让导航选项始终可见

长滚动页面对于用户最大的障碍在于，用户很容易在页面浏览过程中迷失。造成这种状况的原因很多，缺少导航以及导航元素的混乱都有可能损害浏览体验，让用户感到迷惑或者烦躁。优设之前曾经发布过不少导航设计的文章：

在创建长滚动页面的时候，请始终记住，用户是需要在浏览过程中保持“方向感”的，也就是说，需要导航来确定浏览的所在位置。对此，悬浮导航栏其实是一个很不错的解决方案，它会显示当前的位置，并且始终悬浮在屏幕特定的位置，让用户看见。

如果受限于屏幕空间，无法添加导航栏，那么你应该优先考虑跳转式的导航设计：

三、于屏幕右侧的跳转链接

由于移动端屏幕的尺寸较小，固定的导航栏会占据屏幕较大的空间。所以，比较合理的设计是用户向下浏览的时候隐藏导航，而当用户打算回到顶部、向上浏览的时候，让导航栏展现。

四、设计分页

决定你的页面长度的因素应该是你所提供的内容，而不是让页面长度来决定需要填充内容的多寡。

长滚动式的网页和其他的网页一样，它可以用来讲述故事，而它所呈现出来的故事应该更加平滑、线性。以往传统的页面当中，页面的框架下，不同的内容被折叠起来，隐藏在不同的链接和按钮后面，用户总能先看到整个页面的组织架构。而在长滚动页面当中，你需要的是将内容以不同的页面的形式呈现出来，随着用户滚动逐步展现。

五、结合动画效果

有趣的动画效果是让你的设计同用户产生情感联系的重要手段。长滚动页面的设计可以复杂也可以简单，好的交互能够让长滚动特效化腐朽为神奇，而动效则是最重要的粘合剂。动画效果让用户可以让整个网站显得更有吸引力，增加了用户探索过程中的乐趣，提升整体的体验。比如，长滚动式页面当中能够加入视差滚动的动画特效，或者加入滚动触发式的动效，让滚动浏览本身成为一个有趣的东西，让用户知道接下来会发生什么。

六、讲故事

视差滚动通常是让前景和背景的元素之间产生速度差，从而营造出动态的视觉效果。视差的效果本身并不复杂，但是涉及到不同的元素，加上不同运动方式、速度带来的不同效果，视差滚动能够带来的效果各式各样，各不相同。当你使用长滚动页面来讲述故事的时候，中间适时适当地加入视差滚动特效，能够让整个叙事更加平滑自然，最重要的是，它会强化用户的参与感。

网页设计怎么添加滚动字幕

如图，在HTML文件用marquee标签，然后文字放置在marquee标签就会有滚动的效果了。

请点击输入图片描述

marquee文字滚动默认是右到左，但是可以通过direction 来指定方向哦。方向可以用down，up,right left。

请点击输入图片描述

还可以控制滚动行为，比如是不是重复滚动，往返滚动等都是行为哦，可以试试behavior。

请点击输入图片描述

此外，设置滚动速度和文字的延迟滚动也是可以的，用这两个属性便可以了。

请点击输入图片描述

还有我们也应该设置一下滚动文字距离周围的距离，用vspace和hspace来调节。

请点击输入图片描述

当然滚动文字的背景颜色也是比较重要的哦，好看的颜色视觉享受更好哦。

请点击输入图片描述

最后来看看滚动文字的方向，速度，颜色都设置好了，关键要自己动手做一下滚动文字哦。

请点击输入图片描述