js信息滚动

信息滚动效果学习

• marquee函数实现信息滚动

相关知识点：

1.behavior滚动的方式

alternate:表示在两端之间来回滚动。

scroll:表示由一端滚动到另一端，会重复。

slide:表示由一端滚动到另一端，不会重复。

2.direction滚动的方向down up left right

3.loop滚动的次数(当loop=-1表示一直滚动下去，默认为-1）

4.scrollamount设定活动字幕的滚动速度

• JS实现信息滚动

相关知识点：

1.innerHTML

2.sctollTop 设置或获取位于给定对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

3.scrollHeight 返回元素的完整高度

4.offsetHeight 获取元素的可见高度值

5.setInterval() 在执行时，从载入页面后每隔指定时间执行代码

6.clearInterval() 该方法可取消由setInterval()设置的交互时间

• 循环滚动实现：

js代码实现：

var rol = document.getElementById('roll'),

con1 = document.getElementById('con1'),

con2 = document.getElementById('con2');

con2.innerHTML = con1.innerHTML; //克隆con1内容给con2

function rolup() {

if(rol.scrollTop >= con1.scrollHeight) {

rol.scrollTop = 0;

} else {

rol.scrollTop++;

}

}

var time = 50;

var myrol = setInterval('rolup()', time);

rol.onmouseover = function() {

clearInterval(myrol);

}

rol.onmouseout = function() {

myrol = setInterval('rolup()', time);

}

• 间歇性循环滚动实现：

js代码实现：

var rol = document.getElementById("roll");

var iLiHeight = 48;//滚动高度,行高为24，实现一次滚动两行

rol.innerHTML += rol.innerHTML;//克隆一个ul

rol.scrollTop = 0;

var speed=50;//速度0.05s

var delay = 2000;//延迟时间2s

var time;

function startMove(){

rol.scrollTop++;

time = setInterval("scrollUp()",speed);

}

function scrollUp(){

//rol.scrollTop++;

if(rol.scrollTop % iLiHeight == 0){

clearInterval(time);

setTimeout("startMove()",delay);

}else{

rol.scrollTop++;

if(rol.scrollTop >= rol.scrollHeight/2){

rol.scrollTop = 0;

}

}

}

setTimeout("startMove()",delay);

上例中，可以调节滚动高度（iLiHeight）实现以n行为单位间歇性滚动，也可以设置向上滚动的速度 （speed）和每次开始滚动的延迟时间（setTimeout()函数中的delay）。

• 间歇性向上滚动效果展示：

• 将css样式中的盒子高度设置成单行高（本例为24px）则显示一行，并间歇性向上滚动，效果展示：