导航:首页 > 万维百科 > 网站中的滚动文本怎么设计

网站中的滚动文本怎么设计

发布时间:2020-12-01 08:07:15

1、网页设计中 怎样让滚动的文字在鼠标移到它时停下

<SCRIPT language=JavaScript>

var marqueewidth=160

var marqueeheight=120

var speed=1

var marqueecontents=

ef="<div class=bbb ><center>公 告</center> 公司网站正在更新之中,如果浏览出现问题,请与管理员联系。谢谢!!"

if(document.all)

document.write('<marquee direction="up" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>')

function regenerate(){window.location.reload()

}function regenerate2(){if(document.layers){setTimeout("window.onresize=regenerate",450)

intializemarquee()

}}function intializemarquee(){document.cmarquee01.document.cmarquee02.document.write(marqueecontents)

document.cmarquee01.document.cmarquee02.document.close()

thelength=document.cmarquee01.document.cmarquee02.document.height

scrollit()

}function scrollit(){if(document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){document.cmarquee01.document.cmarquee02.top-=speed

setTimeout("scrollit()",100)

}else{document.cmarquee01.document.cmarquee02.top=marqueeheight

scrollit()

}}window.onload=regenerate2

</SCRIPT>

2、网页设计:如何创建一个滚动菜单

首先打开dreamweaver8写基本语法
<marquee>滚动文字 </marquee>
2.文字移动属性的设置
(1)滚动方向属性direction
可以设定文字滚动的方向,分别为向左(left)、向右(right)、向上(up)、向下(down),使滚动的文字具有更多的变化。
基本语法:
<marquee direction="value">滚动文字</marquee>
(2)滚动方式属性behavior
通过这个属性能够设定不同方式的滚动文字效果。如滚动的循环往复、交替滚动、单次滚动等。
基本语法:
<marquee behavior="value">滚动文字</marquee>
(3)滚动循环属性loop
通过这个属性能够让文字滚动循环进行。
基本语法:
<marquee loop="次数">滚动文字</marquee>
(4)滚动速度属性scrollamout
通过这个属性能够调整文字滚动的速度。
基本语法:
<marquee scrollamount="value">滚动文字</marquee>
(5)滚动延迟属性scrolldelay
通过这个属性,可以在每一次滚动的间隔产生一段时间的延迟。
基本语法:
<marquee scrolldelay="value">滚动文字</marquee>
3.外观(Layout)设置
(1)滚动文字对齐方式align
基本语法:
<marquee align="对齐方ottom,对齐上沿、中间、下沿。
(2)滚动背景颜色属性bgcolor

在滚动文字的后面,可以添加背式">滚动文字</marquee>
对方方式=top、middle、b景颜色。
基本语法:
<marquee bgcolor="color_value">滚动文字</marquee>

3、网站设计中,滚动字体的代码是什么?上下滚动和左右滚动,详情代码设置?谢谢

<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=7 direction=up width=270 height=77> 滚动的文字</marquee>
direction=up(上)down(下)left(左)right(右)

4、如何制作网页设计中的滚动字条

网页中的滚动字可以使用marquee标签包裹在设置一些属性.可以设置方向和速度,这个百度可以找到文档

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

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


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


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


滚动的优点:

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

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

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

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

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

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


滚动的缺点


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

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

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

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

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

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

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

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

...包括频繁更新或新内容(如博客)

...有很多信息以单一的方式呈现,以便理解(如信息图)

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

滚动最佳实践

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

7、关于网页设计中滚动栏的制作。。

看我这个,简单的。

说明:1、你放的内容再多表面上会在Dreamweaver中撑破,但是在浏览器是正常
2、这个就是marquee的用法,height 、width定义了滚动的范围,具体的你可以在百度查

<marquee direction=left height=100 scrollamount=1 scrolldelay=2 width=600>
这里放置要滚动的内容,表格、图片、文字都可以
</marquee>

8、网页设计字体滚动代码?

文字滚动是由<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:顶部对齐

与网站中的滚动文本怎么设计相关的知识