zoukankan      html  css  js  c++  java
  • html走马灯效果

    实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示:
    
    滚动的文字
    
      适当的运用<marquee>标签的参数,可以表现出不同的效果,请看下面的几个例子:
    
      1、左右弹来弹去的跑马灯
    弹来弹去跑马灯!
    
      实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动,direction= left表示运动方向向左。marquee的宽度可以使用绝对象素值,例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在 Netscape下是看不到的。
    
      源码粘贴框:
    
    <marquee width=400 behavior=alternate direction=left align=middle>弹来弹去跑马灯!</marquee>
    
      2、跑的很快的跑马灯
    跑的很快跑马灯! 
    
      只要在<marquee>标签后面加上“scrollamount=15”即可,修改=后边的数字参数即可限制文字移动的速度。
    
      3、带有超级链接的跑马灯
    带超级链接的跑马灯!点我试试?          还有一条呢!点我试试?  
    
      实现的方法很简单,把整个<marquee></marquee>语句包含在超链接中就行,你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接,这样的跑马灯就可用来发布滚动新闻或是做站点导航了。
    
      如果你想给跑马灯的文字加上颜色,换用不同的字体(默认是宋体,换体就要加代码),只要在文字前加上<FONT face=楷体_GB2312 color=#ff0000 size=3>就行了,你可在“face=”后边换上你喜欢的字体,在“color=”后边换上你喜欢的字颜色,在“size=”后边换上适合的字号,如果想让字体加粗,就再加上<STRONG>。
        请看一下效果: 带超级链接的跑马灯!点我试试?      还有一条呢!点我试试?
    
      上面效果的代码码如下:
    
    <marquee width=400 scrollamount=2> <a href=http://www.taobaojp5.tk><FONT face=楷体_GB2312 color=#ff0000 size=3><STRONG>带有超链接的跑马灯!点我试试?</a>      <a href=http://954872988.qzone.qq.com/;还有一条呢!点我试试?</FONT></STRONG></a> </marquee>
    
      以上几个例子都是<marquee>标签参数的应用,下面把所有可以利用的参数列在表中供你参考,不过还是要提醒你,<marquee>标签只被IE所支持,使用Netscape浏览器是看不到的噢。
    参数     用法介绍
    behavior=scroll, slide, alternate     跑马方式:循环绕行,只跑一次就停住,来回往复运动
    direction=left,right     跑马方向:从左向右,从右向左
    loop=100     跑马次数:循环100次,如不写默认为一直循环
    width=100%,height=200     跑马范围:宽为100%,高为200像素
    scrollamount=20     跑马速度:数越大越快
    scrolldelay=500     跑马延时:毫秒数,利用它可实现跃进式滚动
    hspace=20,vspace=20     跑马区域与其它区域间的空白大小
    bgcolor=#00FFCC     跑马区域的背景颜色
    face=楷体_GB2312     跑马灯文字字体
    color=#ff0000     跑马灯文字颜色
    size=3     跑马灯文字字号
    STRONG     跑马灯文字加粗
    
      你已经看到,尽管<marquee>参数不少,但毕竟不能实现复杂的和自定义的特殊跑马灯效果,而且还有浏览器限制,所以我们更多情况下会采用JavaScript来实现跑马灯。
  • 相关阅读:
    钱多多软件制作04
    团队项目01应用场景
    HDU 4411 arrest
    HDU 4406 GPA
    HDU 3315 My Brute
    HDU 3667 Transportation
    HDU 2676 Matrix
    欧拉回路三水题 POJ 1041 POJ 2230 POJ 1386
    SPOJ 371 BOXES
    POJ 3422 Kaka's Matrix Travels
  • 原文地址:https://www.cnblogs.com/zhenguo-chen/p/10434217.html
Copyright © 2011-2022 走看看