• 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来实现跑马灯。
  • 相关阅读:
    [WARNING] 找不到编译器:wepy-compiler-less。 [Error] 未发现相关 less 编译器配置,请检查wepy.config.js文件。
    wepy-cli : Failed to download repo standard: getaddrinfo ENOENT raw.githubusercontent.com
    火币Huobi 币安 Binance ios 反编译
    iPhone 反编译-微信多开分身版原理,一部iPhone登录多个微信号
    安卓微信分身版 一部手机同时登录多个微信号 原理
    微信smali反编译 查看撤回消息
    微信抢红包
    Dota2 荒神罪 破解
    微信smali反编译 语音消息转发功能
    mac安装mysql流程
  • 原文地址:https://www.cnblogs.com/zhenguo-chen/p/10434217.html
Copyright © 2020-2023  润新知