从下往上的信息滚动特效

最新推荐文章于 2020-11-10 13:18:16 发布

伊人笑桃花酒

最新推荐文章于 2020-11-10 13:18:16 发布

阅读量1.9k

点赞数

分类专栏： js-Ldemo 文章标签：信息滚动

本文链接：https://blog.csdn.net/T_tq_bnsg_bs_ll/article/details/53401552

版权

js-Ldemo 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

<!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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从下往上的信息滚动特效

挺简单的一个小例子，就是将网页上一块相同相似的内容的区域放在一个层里，然后将内容从下往上滚动，一般用于网页公告或新闻展示。上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>从下往上的信息滚动特效</title> <style> *{
复制链接

扫一扫