marquee一行代码实现滚动跑马灯效果无需js
最近ytkah决定拓展一下业务,贴补一些家用,~(@^_^@)~,将以前做的网站建设案例展现出来,有这方面需求的朋友可以扫一下二维码加我哈,或者推荐朋友给我,有奖励噢!网站设计案例展示一般用幻灯片切换会比较高大上,但这需要用到js,第三方博客等网站不支持外嵌js,或者有些网友不知道怎么用,有一种方法可以解决,用<marquee></marquee>标签,可以实现多种滚动效果,无需js控制。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>
一、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>
- 使用ajax方法实现form表单的提交
- 翻译:如何使用CSS实现多行文本的省略号显示
- node中子进程同步输出
- Java开源博客My-Blog之docker容器组件化修改
- 几个行列转换的实用小例子(r4笔记第2天)
- History API与浏览器历史堆栈管理
- node中创建服务进程
- 数据挖掘工程师:如何通过百度地图API抓取建筑物周边位置、房价信息
- crontab导致CPU异常的问题分析及处理(r3笔记第100天)
- 短信接口被恶意调用(二)肉搏战-阻止恶意请求
- 关于首屏时间采集自动化的解决方案
- javax.net.ssl.SSLHandshakeException: No appropriate protocol (protocol is disabled or cipher suites
- 一次数据库无法登陆的问题及排查 (r3笔记第99天)
- 用深度学习keras的cnn做图像识别分类,准确率达97%
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Saltstack_使用指南08_远程执行-返回程序
- 人生苦短,何不用vim装13
- Saltstack_使用指南09_远程执行-编写执行模块
- 如何安装FreeIPA
- 编译及使用hive-testbench生成Hive基准测试数据
- 树酱的前端知识体系构建(下)
- Babel配置傻傻看不懂?
- Saltstack_使用指南10_配置管理-状态模块
- Saltstack_使用指南11_配置管理-状态之间依赖关系 4.1. 部署架构4.2. Apache和PHP的SLS【正向依赖】4.3. mariadb 的 SLS
- 前端工程化之CICD那点破事
- Saltstack_使用指南12_配置管理-jinja模板 4.1. 部署架构4.2. 本章涉及的 pillar 的信息4.3. 配置文件 httpd.conf 修改
- Saltstack_使用指南13_runner的job和manage与execution的saltutil 5.1. master执行5.2. 查看当前活动的jobs
- Saltstack_使用指南14_无master 3.1. 常规信息3.2. grains设置3.3. pillar设置
- 在CDH7.1.1中安装NiFi
- 重学前端(三)-聊聊我们的浏览器的那些事