`

HTML滚动效果

    博客分类:
  • html
阅读更多
<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=77 direction=up width=270 height=77>  要添加的内容(可用<br分隔>)</marquee>

需用html代码编辑器转换,然后把代码和文章放入源码中转换

代码如下<MARQUEE>滚动文字</MARQUEE>

<marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" >
<div align="left" ><br />
</div >
<center ><font face="黑体" color="#008000" size="4" ></font ></center >
<div align="left" ><br />
</div >
<center >
<p ><font color="#ff6600" size="4" >滚动文字</font ></p >
<p ><font color="#ff4500" size="4" >滚动文字</font ></p >
<p ><font color="#ff3300" size="4" >滚动文字</font ><br />
<br />
</p >
</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里面,请看下面例d的详细说明)Dreamweaver也只能用编写HTML代码的方法。所以强烈建议用记事本打开网页源代码来编辑。

1.建立第一个滚动字幕。代码:
<marquee scrollAmount=2 width=300>靓丽风景线</marquee>
效果如: 靓丽风景线

2.各参数详解:
a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。
b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。
c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。
d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)

3.实例:
a)如何给滚动字幕加超链接?这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果,代码是<marquee scrollAmount=2 width=300><a href=http://www.cctv.com>中央电视台</a></marquee>,点击中央电视台就可以进入了:
中央电视台

b)如何制作当鼠标停留在文字上,文字停止滚动?
代码如:
<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字内容</marquee>
效果如:
文字内容

c)交替效果。代码如:
<marquee scrollAmount=2 width=99 behavior=alternate>文字内容</marquee>
效果如:
文字内容

d)多行文本向上滚动。代码如:
<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好啊!<br>·空气好清新啊<br>·你还好吗<p>·<a href=http://www.cctv.com>靓丽风景线</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=http://www.cctv.com>靓丽风景线</a></marquee>')</script>

e)改变滚动字幕的颜色?可以用样式表来控制。如下效果,代码是<marquee scrollAmount=2 width=300><a style=color:CC6600>你还好吗</a></marquee>。
你还好吗

图片滚动
用<img src=相对路径/文件名>的语句。并且要注意图片名不要中文,要注意区分英文大小写。

图片做超链接
用<a href=>和</a>把<img>包围,并且img必须设border=0,否则图片会出现蓝框。正确的例子如:<a href=http://www.webshu.com><img src=../../j/01.jpg border=0></a>
其中a href=表示超链接,这是最常用的。练习的方法也很简单,就是平时用FP或DW做网页的时候,要多查看源代码。

多张图片排列滚动
通常图片和图片之间用<br>(回行)或<p style=margin-top:9>(精确调整图片间的距离)来链接。也可以把你的图片先用表格排版,然后把这个表格的所有语句也加入到marquee中,让这个表格来滚动。 

代码<script>document.write('<marquee scrollAmount=2 width=340 height=160 direction=up onmouseover=stop() onmouseout=start()><a href=http://www.webshu.com><img src=../../j/01.jpg border=0></a></marquee>')</script>

由上可以看出,HTML代码是可以随意组合的,功能强大!
本文来自:http://kitty0632.blog.163.com/blog/static/319863232007778536787/
分享到:
评论

相关推荐

    HTML图片滚动效果

    HTML图片滚动效果是一种常见的网页动态展示技术,常用于新闻更新、广告展示或照片滑动等场景。这种效果通过JavaScript库或者自定义脚本实现,能够使图片在网页上按照设定的方向和速度连续滚动,增强用户体验,吸引...

    博主推荐html好看的列表滚动效果(源码)

    本文将深入探讨如何使用HTML来实现一个美观且功能丰富的列表滚动效果,同时提供了一个博主推荐的源码示例。这个效果旨在提升用户界面的互动性和视觉吸引力。 首先,我们要实现的是列表的无缝滚动效果。在HTML中,这...

    html5实现的图片滚动效果

    在这个“html5实现的图片滚动效果”中,我们将会探讨HTML5如何通过其特有的元素和API来实现令人印象深刻的图片滚动展示。 首先,HTML5引入了`&lt;figure&gt;`和`&lt;figcaption&gt;`元素,它们专门用于组织和标注图像、图表或...

    html5页面滚动图片视差滚动效果

    HTML5页面滚动图片视差滚动效果是一种现代网页设计技术,它为用户带来了一种沉浸式浏览体验。这种效果使得背景图像在用户滚动页面时以较慢的速度移动,与前景元素形成速度差,从而营造出深度感和立体感,增强视觉...

    全屏响应式列自适应布局html5滚动效果单页模板

    本模板,"全屏响应式列自适应布局html5滚动效果单页模板",正是这一理念的具体体现,利用HTML5的强大功能,构建了一个既美观又实用的网页布局。 首先,模板的核心在于其响应式列自适应布局。这种布局方式能够根据...

    页面视觉差滚动效果

    页面视觉差滚动效果是一种在网页设计中常用的创新技术,它通过使用HTML5和CSS3来增强用户的浏览体验。这种效果通常被称作“Parallax Scrolling”,它利用不同层元素以不同的速度滚动,从而创造出深度感和立体感,...

    html数字滚动效果实例

    HTML数字滚动效果是一种常见的网页动态展示技术,常用于显示实时更新的数据,如股票价格、计数器、投票结果等。这种效果通常是通过JavaScript或者CSS3实现的,有时也会结合HTML5的新特性。以下是对这个实例的详细...

    首页设计,双滚动效果

    在这个场景中,`index.html`可能包含了双滚动效果的HTML布局和初始化代码。例如,可能会有两个独立的`&lt;div&gt;`容器,分别用于不同的滚动区域,然后通过JavaScript进行联动和同步处理。 `使用说明.txt`文件可能是...

    仿苹果官网页面垂直滚动效果OnePageScroll

    综上所述,"仿苹果官网页面垂直滚动效果OnePageScroll"是一个结合了JavaScript、CSS3、HTML和优化策略(如延迟加载)的复杂交互设计,旨在为用户提供类似苹果官网的高品质浏览体验。通过理解和应用这些技术,开发者...

    jQuery全屏页面滚动效果苹果官网页面上下滚动效果代码.zip

    在网页设计中,全屏页面滚动效果是一种常见的交互设计手法,它能带给用户沉浸式的浏览体验。这种效果常被用于企业官网、产品展示页或艺术类网站,以增强视觉冲击力和用户参与度。"jQuery全屏页面滚动效果苹果官网...

    HTML字幕滚动效果

    使用HTML可以实现字幕滚动效果,代码特别简单但是为我们的系统增添了不少色彩。

    html5 仿微信端app列表联动滚动效果.rar

    HTML5与微信端的应用范例,msxt-app利用mui中的picker选择组件制作的小型一级普通联动滚动效果,基于HTML5的一个仿手机端联动特效,如示例图中所示,菜单项是级联的,而且在单击右键的情况下支持滚动效果,这个效果...

    js表格无缝滚动效果

    为了提供更好的用户体验,可以采用JavaScript(js)来实现表格的无缝滚动效果,让表格像一个无边界的容器一样平滑滚动。这种效果在大数据量的展示或者长表格中尤其有用,它能让用户更容易地浏览和查找信息。 首先,...

    html滚动数字

    在HTML页面中,实现数字滚动效果可以为用户提供动态且引人注目的视觉体验。这种效果通常用于显示实时更新的数据,如股票价格、计数器或时间等。在本例中,我们将探讨如何通过HTML、JavaScript和jQuery来创建一个...

    EXT页面波浪滚动效果

    在实现波浪滚动效果时,HTML可能会有一个或者多个特定的容器元素,这些元素通过class或id与JavaScript和CSS进行关联,成为动画作用的目标。 js文件则是JavaScript代码的存放地,其中包含了实现波浪滚动效果的逻辑。...

    iphone 平滑滚动效果 网页制作

    在网页设计领域,特别是在移动端,平滑滚动效果已经成为提升用户体验的重要元素之一。iPhone平滑滚动效果,也称为“iOS平滑滚动”或“触摸滚动”,是针对苹果移动设备优化的一种滚动体验,它使得用户在浏览网页时能...

    jQuery图片左右滚动效果代码.zip

    在本文中,我们将深入探讨如何实现一个基于jQuery的图片左右滚动效果,这通常用于网站的轮播图或幻灯片展示。这个效果包含了左右箭头,可以手动切换,同时具备自动轮播的功能,大大增强了用户体验。 首先,我们需要...

    酷炫的移动端滚动效果

    在创建滚动效果时,我们通常会在HTML中设置滚动区域,如`&lt;div&gt;`或`&lt;section&gt;`元素,并通过CSS来控制其样式和滚动特性。例如,可以使用`overflow: auto`或`overflow: scroll`属性来启用滚动条。 CSS(层叠样式表)则...

    文字无缝滚动效果代码

    总的来说,这个资源包提供了一个完整的文字无缝滚动效果实现方案,涵盖了从HTML结构到JavaScript逻辑,再到CSS样式的各个层面。通过学习和理解这些内容,开发者不仅可以掌握文字无缝滚动的实现技巧,还能加深对...

    两种数字变化滚动效果

    在IT行业中,动态数字滚动效果常用于展示实时更新的数据,如统计数据、计数器或时钟等。在网页开发中,实现这样的效果可以借助于不同的库和框架。本篇文章将详细探讨标题中提到的"两种数字变化滚动效果",分别是使用...

Global site tag (gtag.js) - Google Analytics