<marquee>标签的属性
direction 表示滚动的方向,值可以是left,right,up,down,默认为left;
behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动);
loop 表示循环的次数,值是正整数,默认为无限循环;
scrollamount 表示运动速度,值是正整数,默认为6;(数值越小运动速度越慢)
scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒;
valign 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle;
align 表示元素的水平对齐方式,值可以是absbottom:绝对底部对齐(与g、p等字母的最下端对齐),absmiddle:绝对中央对齐,baseline:底线对齐,bottom:底部对齐(默 认),left:左对齐,middle:中间对齐,right:右对齐,texttop:顶线对齐,top:顶部对齐;
bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色;
height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度;
hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素;
第一种方法:
// scrolldelay="800" scrollamount="100"
<marquee direction="right" onmouseover=this.stop() onmouseout=this.start()>我想鼠标放上来bai就停止</marquee>
第二种方法:
<style> .container { width: 100%; height: 20px; position: relative; border: 1px solid red; overflow: hidden; } .text { position: absolute; right: -300px; width: 288px; animation: myscroll 15s linear 1s infinite running; } .text:hover { // 暂停动画 animation-play-state:paused; } @keyframes myscroll { 100% {right: 1000px} } </style> </head> <body> <div class="container"> <div class="text"> <span>循环滚动播放滴滴答答滴滴答答滴滴答答</span> </div> <div>