html5从下往上特效,从下往上的信息滚动特效

挺简单的一个小例子，就是将网页上一块相同相似的内容的区域放在一个层里，然后将内容从下往上滚动，一般用于网页公告或新闻展示。

上代码：

从下往上的信息滚动特效

*{

margin:0;

padding:0;

text-align: center;

}

#container{

overflow:hidden;

height:600px;

}

var timer=null; //定时器

window.οnlοad=function(){

init();

}

function init(){

var time=20; //定义滚动的时间间隔

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

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

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

d2.innerHTML=d1.innerHTML; //把第二个容器的内容填充到第一个

function MyMarquee(){

if(d2.offsetHeight<=container.scrollTop) container.scrollTop-=d1.offsetHeight;//如果第二个内容滚动完毕，则讲滚动条返回到初始位置

else container.scrollTop++;//若没有加载完毕，则滚动条继续滚动

}

timer=setInterval(MyMarquee,time);

container.οnmοuseοver=function(){

clearInterval(timer);

}

container.οnmοuseοut=function(){

timer=setInterval(MyMarquee,time);

}

}

滚动第一个特效截图:

滚动第二个特效截图: