广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    marquee实现随意滚动文字特效

    2018-04-03 22:13:12 次阅读 稿源:互联网
    零七广告

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

    滚动字幕Marquee代码大全,基本语法

    1. <marquee>滚动文字</marquee>  

    文字移动属性的设置

    方向

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

    方式

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

    循环

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

    速度

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

    延时

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

    外观(Layout)设置

    对齐方式(Align)

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

    底色

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

    面积

    1. <heightheight=# width=#> <marquee height=40 width=50bgcolor=aaeeaa>面积!</marquee>  

    空白

    1. (Margins)<hspacehspace=# vspace=#>  
    2. <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积!</marquee> 

    鼠标响应:即鼠标指向就停,离开继续

    1. onmouseover="this.stop()" onmouseout="this.start()"> 

    例如:

    1. <marquee direction=up scrollamount=2 onmouseover="this.stop();" onmouseout="this.start();" width=100 height=100>中华人民共和国中华人民共和国<br>www.ahuing.com长网欢迎您<br>我学会了, 哈哈哈</marquee> 

    好了就先介绍到这吧,既然访求简单,就难免会有不兼容的问题存在,在这里需要注意的是如果用到marquee里套marquee时,里的那个需要加一个宽度,否则会在ie上出现不兼容的情况。。。

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告