店铺公告里,宝贝描述里,我们经常看到滚动的店铺公告文字;究竟这些动态的文字效果是如何实现的呢?如何制作滚动的店铺公告文字? 如何实现滚动的文字效果? 滚动效果一般是通过HTML代码实现,下面的文章里我们重点介绍HTML滚动代码的使用。 用HTML的<marquee>活动字幕标记所需的代码最少,并且能够以较少的下载时间换来不错的效果。该标记语法格式如下: <marqueealigh=left|center|right|top|bottom bgcolor=#n direction=left|right|up|down behavior=type height=n hspace=n scrollamount=n Scrolldelay=n width=n VSpace=n loop=n> 各参数详解: 1、align:是设定活动字幕的位置左,中,右,顶,底都是很常见的就不用多说了吧。 2、Bgcolor:用于设定活动字幕的背景颜色,一般是十六进制数。 3、Direction:用于设定活动字幕的滚动方向向左、向右、向上、向下。 direction用法down left right up 向下运动 向左运动 向右运动 向上运动 勤奋的小懒猫勤奋的小懒猫勤奋的小懒猫勤奋的小懒猫 4、behavior。用它来控制滚动方式,默认为scroll(从一端到另一端循环滚动),可选的值还有alternate(在两端之间来回滚动)、slide(幻灯片效果,从一端到另一端滚动一次,然后停止滚动) behavior用法alternate scroll slide 内容在相反两个方向滚来滚去内容向同一个方向滚动内容接触到字幕边框就停止滚动 marquee测试marquee测试marquee测试 5、Height和Width:设定滚动字幕的高度和宽度。(这两项参数,在制作垂直滚动时比较有用) 6、Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度。 7、Scrollamount:用于设定活动字幕的滚动速度,值越大速度越快。默认为6,建议设为1~3比较好。 scrollamount值为1 scrollamount值为50 勤奋的小懒猫勤奋的小懒猫 8、scrolldelay:用于设定滚动两次之间的延迟时间。默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。 scrolldelay值为1 scrolldelay值为500 勤奋的小懒猫勤奋的小懒猫 9、Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。 应用实例: 1、单行文字滚动无限次 marquee标记的默认情况就是单行文字向左滚动无限次,如下: <marquee>这里写字幕文字</marquee> 勤奋的小懒猫 但通常,我们还需要添加scrollAmount和width参数来控制速度和字幕的宽度,如下: <marqueescrollamount="2"width="300">这里写字幕内容</marquee> 勤奋的小懒猫 如果需要向右滚动,只要再添加direction参数即可 <marqueescrollamount="2"direction="right"width="300">这里写字幕内容</marquee> 勤奋的小懒猫 2、多行文本向上滚动无限次 <marqueescrollamount="2"direction="right"width="300">这里写字幕内容<br/>第二行</marquee> 勤奋的小懒猫 绣色可餐 欢迎您的光临 这里需要注意的是,如果字幕是放在表格里,一定要注意,宽度个高度设置,一定不要超过单元格的宽度和高度,最好是稍微小一点。还有就是文字换行的时候,只能使用<br/>标记,不能用</p> 3、在滚动字幕中添加超链接 这个和平时作超链接是一样的只要在字母文字外面加上<ahref="连接地址">和</a>就可以了。如下: 欢迎光临我的店铺 4、当鼠标停留在文字上,文字停止滚动 只要添加onmouseover和onmouseout参数即可,代码如下使用即可: <marqueescrollamount="2"width="300">文字内容</marquee> 勤奋的小懒猫 5、设置滚动字幕的颜色 在字幕文字两端添加<aatyle="color:颜色代码">和</a>即可,如下: <marqueescrollamount="2"width="300"><aatyle="color:ffffff">这里写字幕内容</a></marquee> 6、在字幕中插入图像 <marquee><imgheight="16"alt=""src="图片地址"width="17"/>这是加入图象的活动字幕</marquee>
|