核心提示：挺简单的一个小例子，就是将网页上一块相同相似的内容的区域放在一个层里，然后将内容从下往上滚动，一般用于网页公告或新闻展示。上代码：!DOCTYPE htmlhtmlheadmeta charset=u...
挺简单的一个小例子，就是将网页上一块相同相似的内容的区域放在一个层里，然后将内容从下往上滚动，一般用于网页公告或新闻展示。
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>从下往上的信息滚动特效</title>
<style>
*{
margin:0;
padding:0;
text-align: center;
}
#container{
overflow:hidden;
height:600px;
}
</style>
<script>
var timer=null; //定时器
window.onload=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.onmouseover=function(){
clearInterval(timer);
}
container.onmouseout=function(){
timer=setInterval(MyMarquee,time);
}
}
</script>
</head>
<body >
<p id="container">
<table >
<tr>
<td id="con1" valign="top">
<img src="img/1.jpg">
</td>
</tr>
<tr>
<td id="con2" valign="top">
<img src="img/2.jpg">
</td>
</tr>
</table>
</p>
</body>
</html>
滚动第一个特效截图:
滚动第二个特效截图:
