易希飞

Shopex4.9
市场占有最好的商城建站系统

经典的免费网店系统

Shopex4.9集海量模板、交易支付、团购、秒杀、会员营销等于一身,轻松搭建网上商店,快速扩张营销推广。

了解Shopex4.9
网站首页 > 建站学院 > 网站建设技巧

网页特效之滚动字

2017-02-04 15:15:45 易希飞 阅读

某些网站,为了增加用户体验,给页面加了一些特效,这样使用页面看起来很漂亮,其中上下,左右,或者是跳动的字体就是其中的一种效果,实现滚动字的 效果的 方法也很多,例如jq插件,js等,下面ahuing给大家介绍一个比较简单的方法可以实现以上说的效果,用marquee来实现。
滚动字幕Marquee代码大全
基本语法
-------------------------------------------
<marquee>滚动文字 </marquee>

文字移动属性的设置

方向

<direction=#> #=left, right,up,down <marquee direction=left>从右向左移!</marquee>

方式

<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>
<marquee behavior=slide>只走一次就歇了!</marquee>
<marquee behavior=alternate>来回走</marquee>

循环

<loop=#> #=次数;若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>

速度

<scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee>

延时

<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>

外观(Layout)设置

对齐方式(Align)

<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦,我会移动耶!</marquee>
</font>

底色

<bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色!</marquee>

面积

<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积!</marquee>  

空白

(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积!</marquee>
鼠标响应:即鼠标指向就停,离开继续.
onmouseover="this.stop()" onmouseout="this.start()">
例如:<marquee direction=up scrollamount=2 onmouseover="this.stop();" onmouseout="this.start();" width=100 height=100>中华人民共和国中华人民共和国<br>www.ahuing.com长网欢迎您<br>我学会了, 哈哈哈</marquee>
好了就先介绍到这吧,既然访求简单,就难免会有不兼容的问题存在,在这里需要注意的是如果用到marquee里套marquee时,里的那个需要加一个宽度,否则会在ie上出现不兼容的情况。。。