藏宝游传奇

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 88|回复: 0

[网页制作] HTML标签marquee实现滚动效果的简单方法(必看)

[复制链接]
  • TA的每日心情
    开心
    2020-12-29 20:57
  • 签到天数: 3 天

    [LV.2]圆转纯熟

    4332

    主题

    4336

    帖子

    26万

    积分

    超级版主

    Rank: 8Rank: 8

    积分
    261202
    发表于 2020-11-4 18:54:28 | 显示全部楼层 |阅读模式
    下面小编就为大家带来一篇HTML标签marquee实现滚动效果的简单方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制。
    使用marquee标记不仅可以移动文字,也可以移动图片,表格等.
    语法:<marquee>...</marquee>; 说明:在标记之间添加要进行滚动的内容。
    重要属性:
    1.滚动方向direction(包括4个值:up、 down、 left和 right)
      语法:<marquee direction="滚动方向">...</marquee>
    2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)
      语法:<marquee behavior="滚动方式">...</marquee>
    3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)
      语法:<marquee scrollamount="5">...</marquee>
    4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)
      语法:<marquee scrolldelay="100">...</marquee>
    5.滚动循环loop(默认值是-1,滚动会不断的循环下去)
      语法:<marquee loop="2">...</marquee>
    6.滚动范围width、height
    7.滚动背景颜色bgcolor
    8.空白空间hspace、vspace
    代码示例:
    XML/HTML Code
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    2. <html xmlns="http://www.w3.org/1999/xhtml">   
    3. <head>   
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    5. <title>无标题文档</title>   
    6. </head>   
    7.    
    8. <body>   
    9. <div>   
    10. <marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">   
    11. 指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...   
    12. </marquee>   
    13. </div>   
    14. </body>   
    15. </html>
    复制代码
    以上就是小编为大家带来的HTML标签marquee实现滚动效果的简单方法(必看)的全部内容了,希望大家喜欢哦~

    回复

    使用道具 举报

    Archiver|手机版|小黑屋|藏宝游

    GMT+8, 2021-8-1 18:09 , Processed in 0.048001 second(s), 27 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表