学习编程一小时

marquee 标签参数详细说明

​marquee 元素​​（​​<marquee>​​）可以 用来插入一段滚动的文字，实现类似走马灯的动效。​但这个标签已经过时（MDN文档已经不建议使用），此前因之前项目紧急用过，做个标签参数小结。

1. marquee的属性

behavior：设置文本如何滚动。属性值有3种：
scroll - 循环滚动。默认值。
slide - 滚动一次。
alternate - 两端来回滚动。

direction：设置文本滚动的方向。属性值有4种：
left - 从右向左。默认值。
right - 从左向右。
up - 向上。
down - 向下。

loop：设置滚动的次数。默认值-1，无限次循环。

scrollamount：设置每次滚动时移动的长度（以像素为单位），也就是滚动速度。默认值为6 。
值越大，滚动速度越快，一般5-10比较适合查看消息。

scrolldelay：设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。
值越大，滚动速度越慢，通常不设置。
注意：除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。

truespeed：默认情况下，会忽略小于60的scrolldelay值。如果存在truespeed，那些值不会被忽略。
bgcolor：通过颜色名称或十六进制值设置背景颜色。
vspace：以像素或百分比值设置垂直边距。
width：以像素或百分比值设置宽度。
height：以像素或百分比值设置高度。
hspace：设置水平边距。

2. 方法

start：开始滚动 marquee。
stop：停止滚动 marquee。
上面两个方法通常和鼠标事件配合，来实现“鼠标移入停止滚动，鼠标一开开始滚动”的效果。亲测有效。

3. 事件回调

onbounce：当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。
onfinish：当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。
onstart：当 marquee 开始滚动时触发。

今天我们理论知识先告一段落，下面进行实践操作。

html整体框架如下：

• • 
    

<div class="news">
<div class="news-l">重要通知</div>
<div class="news-r">
<marquee>
<ul>
<li><a href="#">广州喜讯，报名网页平面ul就业班喜送基础班</a></li>
<li><a href="#">史上最难就业年，怎么办？到传智免费学ps吧</a></li>
</ul>
</marquee>
</div>
</div>

css样式如下：

• • 
    

body,ul,li{
  padding: 0;
  margin: 0;
  border: 0;
  list-style: none;/* 设置列表项目不使用项目符号 */
}
.news{
  width: 998px;
  height: 30px;
  border: 1px solid #C4C4C4;
  margin: 0 auto;
}
.news-l,.news-r{
  height: 30px;
  line-height: 30px;
  float: left;
  text-align: center;
}
.news-l{
  width: 96px;
  height: 30px;
  border-right: 1px solid #C4C4C4;
  text-align: center;
  line-height: 30px;
}
.news-r{
  width: 900px;
}
.news-r li{
  float: left;
  margin-right: 15px;
}
.news-r li a{
  text-decoration: none;
  padding-left: 10px;
  background: url(../img/icon6.gif) no-repeat center left;
}

效果图如下：

学习编程一小时

小编｜李仔