从下往上的信息滚动特效

来源：互联网发布：网络歌曲排行榜2008 编辑：程序博客网时间：2024/06/10 15:11

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

<!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>

滚动第一个特效截图:

滚动第二个特效截图:

0 0