转载

如何让一条小丑鱼会骑自行车

最近看到一个有趣的网页，页面很简单，一条鱼骑着自行车，从右边出来，从左边消失，来回的滚动。看了一下源代码，非常的简单，使用了一个不常见的HTML标记： marquee 。

HTML代码

<marquee behavior="scroll" direction="left" scrollamount="30" truespeed="yes"> <img src="FishBike.png" /> </marquee>

效果

观看演示

是不是很有趣！

这种效果，以前在网页是很是流行。不过最近几乎见不到了，原因是它干扰网页读者。对于这种来回滚动的文字和图片，似乎只有电视台在新闻节目的下边滚动新闻的形式。我查看了一下资料，发现 marquee 标记是一种不推荐使用的标记。虽然现在的大多数浏览器都支持，但保不齐将来会怎样。

我还发现了另外一个它的有趣特征， marquee 标记还能表现出物体反弹的效果。下面就是一个演示例子。

HTML代码

<marquee>这段文字将会从右向左滚动</marquee>  <marquee direction="up">这段文字将会从下向上滚动</marquee>  <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">   <marquee behavior="alternate">     这段文字将会进行弹跳运动   </marquee> </marquee>

实例演示

这段文字将会从右向左滚动这段文字将会从下向上滚动这段文字将会进行弹跳式运动

下面我们来看看 marquee 的具体用法。

`marquee` 标记的各种属性：

behavior: 属性值可以是 scroll , slide 或者 alternate 。也就是运动方式分为滚动，滑动或斜着运动。缺省值是 scroll 。
bgcolor: 背景色
direction: 运动方向，值可以为 left , right , up 和 down 。缺省为 left 。
height: 高度。
hspace: 竖向边距。
loop: 设置滚动循环次数。如果不指明，缺省值是-1，也就是无限滚动。
scrollamount: 滚动时，每移动一次的位移距离，用像素值表示，缺省是6。
scrolldelay: 每位移一次之间间隔的时间，用毫秒表示。缺省值是85。需要注意的是，这个值如果设定为效应60，你还需要使用 truespeed 属性来共同作用，否则低于60为无效值。
truespeed: 当有这个属性时， scrolldelay 值可以低于 60 。
vspace: 横向边距
width: 宽度。