<marquee></marquee>可以实现多种滚动效果,无需js控制。使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等

   marquee标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果,该标签是个容器标签。

 一、marquee标签的几个重要属性:

1.direction:滚动方向(包括4个值:up、down、left、right)

说明:up:从下向上滚动;down:从上向下滚动;left:从右向左滚动;right:从左向右滚动。

语法:<marquee direction="滚动方向">...</marquee>

2.behavior:滚动方式(包括3个值:scroll、slide、alternate)

说明: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>

<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>

<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>

6.width、height:设定滚动字幕的宽度、高度

语法:<marquee width="500" height="200">...</marquee>

7.bgcolor:设定滚动字幕的背景颜色(可以是颜色值,也可以是rgb()或rgba()函数)

语法:<marquee bgcolor="rgba(0,0,0,0.2)">...</marquee>

8.hspace、vspace:空白空间(相当于设置margin值)

说明:hspace:设定活动字幕里所在的位置距离父容器水平边框的距离,如hspace=“10”,即等同于:margin:0 10px;

vspace:设定活动字幕里所在的位置距离父容器垂直边框的距离,如vspace=“10”,即等同于:margin:10px 0;

语法:<marquee hspace="10"  vspace="10">...</marquee>(等同于:margin:10px;)

9.align:设定滚动字幕内容的对齐方式(包括9个值:absbottom、absmiddle、baseline、bottom、left、middle、right、                                       texttop、top)

说明:absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
                          absmiddle:绝对中央对齐
                          baseline:底线对齐
                          bottom:底部对齐(默认)
                          left:左对齐
                          middle:中间对齐
                          right:右对齐
                          texttop:顶线对齐
                          top:顶部对齐

语法:<marquee align="对齐方式">...</marquee>

10.face:设定滚动字幕的文字字体

语法:<marquee font="楷体_GB2312"></marquee>

11.color:设定滚动字幕的文字颜色

语法:<marquee color="#333"></marquee>

12.size:设定滚动字幕的文字字号

语法:<marquee size="3"></marquee>

13.STRONG:设定滚动字幕的文字加粗

语法:<marquee STRONG></marquee>

  二、marquee常用到的两个事件:
               onMouseOut="this.start()" 用来设置鼠标移出该区域时继续滚动
               onMouseOver="this.stop()" 用来设置鼠标移入该区域时停止滚动

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">marquee常用到的两个事件</marquee>

完整代码如下:

<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50"            vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">

尽管<marquee>参数不少,但毕竟不能实现复杂的和自定义的特殊跑马灯效果,而且还有浏览器限制,所以我们更多情况下会采用JavaScript来实现跑马灯滚动效果。

  <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100" οnmοuseοver="this.stop();"     οnmοuseοut="this.start();">
    这里是要滚动的内容
  </marquee>

转载于:https://www.cnblogs.com/DY9412/p/6179149.html

marquee 实现首尾相连循环滚动效果相关推荐

  1. 分别用marquee和div+js实现首尾相连循环滚动效果

    分别用marquee和div+js实现首尾相连循环滚动效果,特效代码非常精简,仅3行实现! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  2. unity实现图片轮播效果_unity 背景无限循环滚动效果

    背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...

  3. Html笔记——实现一组图片循环且首尾相连的滚动效果

    设计思想:在一个Div内存放两个相同内容(使用一行多列表格)作为一个滚动对象,并将超出的宽度的内容隐藏,在JS脚本中定义Div向移动的方法(水平坐标加1).当第一个内容完全消失(即Div向左移动的距离 ...

  4. html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果

    1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.se ...

  5. js 停顿一秒_JS实用的带停顿的逐行文本循环滚动效果实例

    如下所示: JS实用的带停顿的逐行文本循环滚动效果 #scrollBox2{font-size:12px;width:260px;color:#646464;line-height:22px;heig ...

  6. android中奖名单轮播,iOS模拟中奖名单循环滚动效果

    本文实例为大家分享了iOS模拟中奖名单循环滚动效果的具体代码,供大家参考,具体内容如下 1.动态效果图: 2.思路: (1)控件:一个父View,依次添加两个tableVew,使其上下紧挨着,高度均等 ...

  7. 3.8 JS 制作无间断图片循环滚动效果

    制作无间断图片循环滚动效果 要求图片高度,高度自行设定,要求显示n张图片(n=你的学号末位+6),例如:你的学号末位是3,那么你需要显示3+6共9张图片,9张图片循环滚动 index.html < ...

  8. html中图片自动循环滚动代码,实现长图片自动循环滚动效果

    实现思路 滚动效果用实现.有个方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里种定位滚动方式演示.每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效 ...

  9. 微信小程序简单实现类似饿了么,美团文字公告告示垂直循环滚动效果

    首先先来看下效果图 一开始的时候是打算自己用animation自己写出这样的一个动画效果,后面写完了,ui小姐姐看过后觉得十分不满意. 其实自己也觉得不太满意, 效果不太好,可能是自己功夫不到家啊,哈 ...

最新文章

  1. ATS 5.3.0缓存架构
  2. orth--将矩阵正交规范化
  3. sparksql(3)——dataframe导入json-spark.read.json()
  4. python人脸识别门禁系统毕设_人脸识别门禁系统 毕业设计 可移植树莓派
  5. Android异常总结---Test run failed:Unable to find instrumentation target package
  6. 《Beginning Linux Programming》读书笔记(一)
  7. lua table remove元素的问题
  8. 【开源系列】三国演义LBS (二)游戏策划案
  9. git常用使用命令个人总结
  10. spark streaming读取kafka数据,记录offset
  11. 图像分类经典卷积神经网络—SENet论文翻译(中英文对照版)—Squeeze-and-Excitation Networks(挤压和激励网络)
  12. PAT 甲级 1020. Tree Traversals
  13. 用蚕茧表示法写简洁实用的接口文档
  14. Python中flask_sqlalchemy的使用
  15. 100集华为HCIE安全培训视频教材整理 | Agile Controller终端安全管理特性(一)
  16. vs community 2019安装失败问题解决
  17. html页面计算圆的周长和面积,计算圆的周长和面积(VB)
  18. python爬取豆瓣250排行榜数据
  19. matlab静电场有限元分析
  20. 华为小世界杯来了:从一棵树到一片森林的大赛

热门文章

  1. Java计算机毕业设计视频点播系统演示录像源码+系统+数据库+lw文档
  2. java压缩包解压之后怎么安装_解压之后压缩包可以删除吗
  3. 谷歌发布Amber项目,用AI分析脑电波诊断治疗抑郁症
  4. P2400 秘密文件(区间dp)
  5. 计算机基础——二进制加法
  6. base64 图片在线解码/编码
  7. STM32F103之实验6 采用MPU6050及DMP解算移动机器人姿态实验
  8. mac最好用的压缩软件Keka最新版推荐
  9. 第五章 投资性房地产
  10. 新代系统反向间隙参数_新代系统参数