您的位置：首页 > 其它

从下往上的信息滚动特效

2016-11-29 22:39 106 查看

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

<!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 >
<div 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>
</div>
</body>
</html>

滚动第一个特效截图:

滚动第二个特效截图:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 信息滚动

相关文章推荐

新的分享

章节导航