挺简单的一个小例子,就是将网页上一块相同相似的内容的区域放在一个层里,然后将内容从下往上滚动,一般用于网页公告或新闻展示。
上代码:
从下往上的信息滚动特效*{
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);
}
}
|
|
滚动第一个特效截图:
滚动第二个特效截图: