信息滚动（marquee+JS实现）

---

Attributes

behavior

Sets how the text is scrolled within the marquee. Possible values are  scroll ,  slide  and  alternate . If no value is specified, the default value is  scroll .

bgcolor

Sets the background color through color name or hexadecimal value.

direction

Sets the direction of the scrolling within the marquee. Possible values are  left ,  right ,  up and  down . If no value is specified, the default value is  left .

height

Sets the height in pixels or percentage value.

width

Sets the width in pixels or percentage value.

hspace

Sets the horizontal margin

loop

Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously.

scrollamount

Sets the amount of scrolling at each interval in pixels. The default value is 6.

scrolldelay

Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead, unless truespeed  is specified.

truespeed

By default,  scrolldelay  values lower than 60 are ignored. If  truespeed  is present, those values are not ignored.

vspace

Sets the vertical margin in pixels or percentage value.

---

补充：

• behavior的默认值为scroll
• scrollamount 表示运动速度，值是正整数，默认为6，数值越大，移动速度也越快
• scrolldelay 用于设定两次滚动操作之间的间隔时间，该时间以毫秒为单位
• <marquee bgcolor=FF0000>...</marquee> 设定背景颜色
• <marquee οnmοuseοver="this.stop();" οnmοuseοut="this.start();">...</marquee> 鼠标移上去就暂停滚动

---

为什么<marquee>标签会被弃用？

因为它违反了W3C的武学道义，W3C江湖第一原则就是功能性分离即 行为与表现的分离，只有恪守这个原则的标签才会被允许参加舞林大会，其他类似于marquee尔等皆是歪门邪道，武功再高也不要，不要！好像就是武功太高啦，哈哈

---

无缝滚动

var area =document.getElementById("con");

var con1 = document.getElementById("con1");

var con2 = document.getElementById("con2");

con2.innerHTML = con1.innerHTML;

function scrollUp() {

if (con.scrollTop >= con1.offsetHeight) {

con.scrollTop = 0;

} else {

con.scrollTop ++;

}

}

var myScroll = setInterval("scrollUp()", 30);

con.onmouseover = function () {

clearInterval(myScroll);

}

con.onmouseout = function () {

myScroll = setInterval("scrollUp()", 30);

}

---

间歇性滚动

// 克隆

var box3con =document.getElementById("box3con");

box3con1.innerHTML += box3con1.innerHTML;

function box3scrollUp() {

box3con.scrollTop ++;

if (box3con.scrollTop % 30 == 0) {

clearInterval(box3myScroll);

setTimeout(function () {

box3con.scrollTop ++;

box3myScroll = setInterval(box3scrollUp, 50);

}, 2000);

}

}

var box3myScroll = setInterval(box3scrollUp, 50);

box3con.onmouseover = function () {

clearInterval(box3myScroll);

}

box3con.onmouseout = function () {

box3myScroll = setInterval(box3scrollUp, 50);

}

---

<marquee>案例

<div id="box1">

<marquee behavior="" direction="up">

我是滚动默认up

</marquee>

<marquee behavior="scroll" direction="down" >

我是滚动behavior="scroll"down

</marquee>

<marquee behavior="slide" direction="" scrollamount="6" loop="2">

我是滚动behavior="slide"

</marquee>

<marquee behavior="scroll" direction="right" scrollamount="10" scrolldelay="0" οnmοuseοver="this.stop();" οnmοuseοut="this.start();">

<p><a href="">我是滚动behavior="scroll"</a></p>

</marquee>

<!-- "down"与"left"的合成 -->

<marquee behavior="scroll" direction="down" width="250" height="150" behavior="alternate" style="border:solid">

<marquee behavior="alternate" direction="left">

This text will bounce

</marquee>

</marquee>

</div>