Javascript实现信息滚动效果

本文实例为大家分享了js信息滚动效果的具体代码，供大家参考，具体内容如下

rush:xhtml;">

>

Box">

2013-09-18
• 2013-10-09
• 2013-10-21
• 2013-11-01
• 2013-11-06
• 2013-11-08
• 2013-11-15
• 2013-11-22
• 效果2013-12-06

<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
var speed = 50;
area.scrollTop = 0;
con2.innerHTML = con1.innerHTML;
function scrollUp(){
if(area.scrollTop >= con1.scrollHeight) {
area.scrollTop = 0;
}else{
area.scrollTop ++;
}
}
var myScroll = setInterval("scrollUp()",speed);
area.onmouSEOver = function(){
clearInterval(myScroll);
}
area.onmouSEOut = function(){
myScroll = setInterval("scrollUp()",speed);
}

间歇性滚动：

rush:xhtml;">

>

Box">

• 2013-09-18
• 2013-10-09
• 2013-10-21
• 2013-11-01
• 2013-11-06
• 2013-11-08
• 2013-11-15
• 2013-11-22
• 效果2013-12-06

<script type="text/javascript">
var area = document.getElementById('moocBox');
var iliHeight = 24;//单行滚动的高度
var speed = 50;//滚动的速度
var time;
var delay= 2000;
area.scrollTop=0;
area.innerHTML+=area.innerHTML;//克隆一份一样的内容
function startScroll(){
time=setInterval("scrollUp()",speed);
area.scrollTop++;
}
function scrollUp(){
if(area.scrollTop % iliHeight==0){
clearInterval(time);
setTimeout(startScroll,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop =0;
}
}
}
setTimeout(startScroll,delay)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。