marquee:
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制。
使用marquee标记不仅可以移动文字,也可以移动图片,表格等.
语法:<marquee>...</marquee>; 说明:在标记之间添加要进行滚动的内容。
代码展示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;text-decoration:none;} .marquee{width:500px;height:40px;border:1px solid #ccc;margin:100px auto;font-size:20px;line-height:40px;} </style> </head> <body> <div class="marquee"> <marquee direction="right" height="40" scrollamount="5" loop="-1" behavior="alternate" onmouseover="stop();" onmouseout="start();"><a href="###">内容啊实打实大师大声大声道</a></marquee> </div> </body> </html>
效果展示:
知识点总结:
一.支持两个事件:
onmouseover="this.start()" :用来设置鼠标移入该区域时停止滚动;
onmouseout="this.stop()":用来设置鼠标移出该区域时继续滚动;
二.支持属性
1.align:设定<marquee>标签内容的对齐方式
absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
absmiddle:绝对中央对齐
baseline:底线对齐
bottom:底部对齐(默认)
left:左对齐
middle:中间对齐
right:右对齐
texttop:顶线对齐
top:顶部对齐
2.behavior:设定滚动的方式
alternate: 表示在两端之间来回滚动。
scroll: 表示由一端滚动到另一端,会重复。
slide: 表示由一端滚动到另一端,不会重复。
3.direction:设定活动字幕的滚动方向(down,up,left,right);
4.height:设定活动字幕的高度;
5.设定活动字幕的宽度;
6.hspace:设定活动字幕里所在的位置距离父容器水平边框的距离;
7.vspace:设定活动字幕里所在的位置距离父容器垂直边框的距离;
8.loop:设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1;
9.scrollamount:设定活动字幕的滚动速度,单位pixels;
10.scrolldelay:设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)
扩展:
仿marquee
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <style> .marquee { margin:100px auto; height: 30px; width: 420px; border:1px solid red; overflow: hidden; } .marquee div { display: block; width: 100%; height: 30px; line-height:30px; overflow: hidden; animation: marquee 5s linear infinite alternate; text-align: right; } @keyframes marquee { 0% {transform: translate(0px); } 100% {transform: translate(-100%);} } </style> </head> <body> <div class="marquee"> <div> <span>世界这么大,我想去看看1</span> </div> </div> </body> </html>